代码之家  ›  专栏  ›  技术社区  ›  user3684675

删除在一个下拉列表字段中选择的选项,并且不在该行中的其他下拉列表中显示不工作-jquery

  •  0
  • user3684675  · 技术社区  · 6 年前

    我有一个包含多列的html表,在两列中显示下拉列表。当用户从一个下拉列表中选择值时(选择Product1

    下面的示例代码适用于表中所有可用下拉列表(selectproduct1,selectproduct2)的类名相同的情况,但在我的示例中是这样的

    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();
                    }
                });
            }
        });
    });
    

    示例演示: http://plnkr.co/edit/VSdhVfhyIfI0rV6efrZv?p=preview

    在上面的演示中,当用户从一行的一个下拉列表中选择产品“膝上型电脑”时,选项“膝上型电脑”不应显示在该行的另一个下拉列表中。。。

    1 回复  |  直到 6 年前
        1
  •  1
  •   charlietfl    6 年前

    在同一行中查找,而不是在表中的所有选择上循环。匹配值也会更简单

    $combo.on("change", function() {
      var $sel = $(this),
           val = $sel.val();
    
      $sel.parent().siblings().find('.combo option[value=' + val + ']').remove()
    
    });
    

    但是请注意,您还有一个不同的问题,即如果用户更改了以前选择的一个,您将无法重新插入一个。