删除在一个下拉列表字段中选择的选项，并且不显示在该行不存在的其他下拉列表中

Question

I have a html table with multiple columns, in two columns i'm displaying the dropdown list. When user selects the value from one dropdown list(Select Product1 or Select Product2 dropdown list), i want to remove the option selected in one dropdown and dont show that option in the other dropdown list...

Below sample code works when the class name is same for all the dropdown list available in the table(Select Product1,Select Product2), but in my case the class name for the dropdown list is same for each colum in the table which breaks the below code.

var $combo = $(".combo");
$combo.on("change", function () {
    var select = this,
        selected = $("option:selected", this).text();

    $combo.each(function (_, el) {
        if (el !== select) {
            $("option", el).each(function (_, el) {
                var $el = $(el);
                if ($(el).text() === selected) {
                    $el.remove();
                }
            });
        }
    });
});

Sample Demo : http://plnkr.co/edit/VSdhVfhyIfI0rV6efrZv?p=preview

In the above demo, when user selects product "laptop" from one dropdown list for one row, the option "laptop" should not be shown in the other dropdown list present in that row...

Answer 1

Look in same row instead of looping over all the selects in the table. ALso would be simpler to match values

$combo.on("change", function() {
  var $sel = $(this),
       val = $sel.val();

  $sel.parent().siblings().find('.combo option[value=' + val + ']').remove()

});

Note however that you have a different issue also whereby if user changes one that was previously selected you don't have the ability to re-insert one.

Should consider keeping a clone of all the options stored in a variable so you can look for the missing one during subsequent changes