javascript - 选择其他项目时从选择框中添加和删除选项

Question

我使用了 jsfiddle 上的代码(如下)。我遇到的问题是，如果我将选项值更改为与文本值不同，它会在更改时将该值添加回文本字段。

jQuery(function(){
            jQuery('.selbox').change(function(){
            var val = jQuery(this).val();

            var sel = jQuery(this);

            if(val != "")
            {
            if(sel.data("selected"))
            {   
            var oldval = sel.data("selected");


            sel
           .siblings('select')
           .append(jQuery('<option/>').attr("value", oldval).text(oldval));
           }

           sel
            .data("selected", val)
            .siblings('select')
            .children('option[value=' + val + ']')

            .remove();
          }
          else if(val == "")
          {
          if(sel.data("selected"))
          {   
           var oldval = sel.data("selected");


           sel
           .removeData("selected")
           .siblings('select')
           .append(jQuery('<option/>').attr("value", oldval).text(oldval));
           }
           }            
           });
           });

我正在使用代码

<option value="1">text here</option>

原码请看这里http://jsfiddle.net/BUuZv/2/

Answer 1

您可以像this fiddle 一样简单地隐藏/显示 它们，而不是删除和添加它们。

$(function() {
    $('.selbox').change(function() {
        var val = $(this).val();
        var sel = $(this);

        if (val != "") {
            if (sel.data("selected")) {
                var oldval = sel.data("selected");
                sel.siblings('select').find('option[value="' + oldval + '"]').show()
            }

            sel.data("selected", val).siblings('select').children('option[value=' + val + ']').hide();
        }
        else {
            if (sel.data("selected")) {
                var oldval = sel.data("selected");
                sel.removeData("selected").siblings('select').find('option[value="' + oldval + '"]').show()
            }
        }
    });
});