jquery - 使用 JQuery 搜索和销毁

Question

确保所有选择的选项只出现一次的最佳方法是什么？

例如：

1. 用户从 col_1 选择框中选择“SSN”
2. 然后用户从 col_2 中选择“姓氏”
3. 然后用户错误地从 col_3 中选择了“SSN”

我希望能够清除 (value="") 选择 SSN (col_1) 的上一个选择框

JS：

$(document).ready(function(){

    $("select").change(function(){

        var selectedColVal = $(this).val();                 
        var selectedCol = $(this).attr('id');

        //todo: see if currently selected value has already been selected
        //and clear the previous selectbox


    });

});

HTML：

<div id="col_1">
      <select id="column_1" name="column_1">
         <option value="">Select Column Name</option>
         <option value="First Name">First Name</option>
         <option value="Last Name">Last Name</option>
         <option value="Email">SSN</option>
      </select>
</div>
<div id="col_2">
      <select id="column_2" name="column_2">
        <option value="">Select Column Name</option>
        <option value="First Name">First Name</option>
        <option value="Last Name">Last Name</option>
        <option value="Email">SSN</option>
    </select>
</div>
<div id="col_3">
  <select id="column_3" name="column_3">
    <option value="">Select Column Name</option>
    <option value="First Name">First Name</option>
    <option value="Last Name">Last Name</option>
    <option value="Email">SSN</option>
</select>
</div>

Answer 1

像这样：

$(document).ready(function(){

    $("select").change(function(){

        var selectedColVal = $(this).val();                 
        var selectedCol = $(this).attr('id');

        // find select (except current) that has same value selected
        var $tmp = $("select:not(#" + selectedCol + ") option[value='" + selectedColVal + "']:selected").parent();
        // clear value
        $tmp.val("");
    });

});

现场样品

Answer 2

你在寻找这样的东西吗？

$(document).ready(function () {
    var selects = $("select"); // cache
    selects.change(function () {
        var self = $(this),
            others = selects.not(self);
        others.each(function (i, elem) {
            var other = $(elem);
            if (other.val() ===  self.val()) {
                other.val('');
            }
        });
    });
});

工作小提琴：http: //jsfiddle.net/kUHh5/