选择其他项目时，在选择框中添加和删除选项

Question

I have used the code (below) which was featured on jsfiddle. The problem i have is that if i change the option value to be different from the text value, it then adds the value back into the text field on change.

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

I am using code

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

Please see here for the original code http://jsfiddle.net/BUuZv/2/

Answer 1

Instead of removing them and adding them, you could simply hide/show them like 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()
            }
        }
    });
});