javascript - 将禁用添加到表格列表中的表单选项

Question

我有一个表格和一个带有下拉列表的表格：

<table>
    <tr>
        <td class="text">Apple</td>
        <td class="name">John</td>
    </tr>
    <tr>
        <td class="text">Orange</td>
        <td class="name">Smith</td>
    </tr>
</table>

<form>
    <select>
        <option value="Apple">Apple</option>
        <option value="Banana">Banana</option>
        <option value="Orange">Orange</option>
        <option value="Grape">Grape</option>
    </select>
</form>

我想为已经在表格上的下拉列表中的每个选项添加一个禁用属性，从而导致：

<table>
    <tr>
        <td class="text">Apple</td>
        <td class="name">John</td>
    </tr>
    <tr>
        <td class="text">Orange</td>
        <td class="name">Smith</td>
    </tr>
</table>

<form>
    <select>
        <option value="Apple" disabled>Apple</option>
        <option value="Banana">Banana</option>
        <option value="Orange" disabled>Orange</option>
        <option value="Grape">Grape</option>
    </select>
</form>

有没有办法使用jQuery来实现？

Answer 1

$("td.text").text(function(i, txt) {
    $("select option[value='" + $.trim(txt) + "']").prop("disabled", true);
});

演示：http: //jsfiddle.net/322PA/

Answer 2

从选择选项中获取每个项目的值，并将其与表行内的数据进行比较。如果两者都匹配，则禁用下拉列表/选择元素中的数据/选项。

$(document).ready(function(){
    //loop through the select option
    $("form > select").children().each(function(){
        //store each option to check later
        var item = $(this).val();
        //loop through table row
        $("table").children().each(function(){
            //loop through table data
            $("tr").children().each(function(){
                //compare previously stored item with table data value
                if(item == $(this).text()){
                    //disable option 
                    $("form > select > option:contains(" + item + ")").attr("disabled", "disabled");
                }
            });
        });
    });
});

jsFiddle 演示

Answer 3

我猜您将动态更改表格的内容，并希望在表格更改时更新选择元素。因此，您必须确保它在每次使用时都会更新。

$("#theSelector").bind("mouseenter", disableOptions);

function disableOptions() {

    var tableData = [];
        $("#theTable tr").each(function() {
            tableData.push($(this).children(":first").text());
        });

    $("#theSelector option").each(
        function() {
            if(jQuery.inArray(this.text, tableData) > -1) {
                $(this).prop('disabled', true);
            }
        }
    );
}