jQuery-恢复删除的select选项

Question

我有多个具有相同选项的下拉菜单。如果选择了一个选项，其他下拉菜单将不会显示所选的选项。当我尝试重置所选选项时，它没有恢复已删除的选择选项。

HTML部分：

<select id="selectNumber" class="selectbox">
    <option value="0">Choose a number</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<select id="selectNumber2" class="selectbox">
    <option value="0">Choose a number</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

Javascript部分：

$(".selectbox").change(function(){
    var selectedIndex = $(this).index();    
    var myVal = $(this).val();
    $(".selectbox").each(function(i){        
        if (selectedIndex != i){
            $("option", this).each(function(){                
               if (myVal == $(this).val() && myVal != 0){
                   $(this).detach();
               }else{
                   $(this).prepend();
                   //not work
               }
            });
        }
    });
});

演示但不起作用的

谢谢你抽出时间。

Answer 1

这应该是你想要的

/* store options */
var $selects = $(".selectbox");
var $opts = $selects.first().children().clone();

$selects.change(function () {       
    var myVal = $(this).val();
    if (myVal !='0') {
         $selects.not(this).children('[value="'+myVal+'"]').remove();
    }else{
        var replaceVal=$(this).data('currVal');
        $selects.not(this).append( $opts.filter( '[value="'+replaceVal+'"]').clone())
    }
    $(this).data('currVal', myVal);
});

演示http://jsfiddle.net/7Ssu7/8/

编辑版本-保持排序顺序

/* store options */
var $selects = $(".selectbox");
var $opts = $selects.first().children().clone();

$selects.change(function () {
    /*create array of all selected values*/    
    var selectedValues=$selects.map(function(){
        var val=$(this).val();
        return val !=0? val :null;
    }).get();

    $selects.not(this).each(function(){     
        var $sel=$(this), myVal=$sel.val() ||0;        
        var $options=$opts.clone().filter(function(i){
            var val=$(this).val();         
            return  val==myVal || $.inArray(val, selectedValues) ==-1;
        });
        $sel.html( $options).val( myVal)
    });  
});

演示：http://jsfiddle.net/8uunN/1/

Answer 2

执行detachment（）时，对象将被删除，需要放入一个"全局"变量中以保存为引用。出于您的目的，您可以使用.hide（）和.show（），因为它将对象保留在列表中，而不会导致DOM插入或删除（因此性能肯定更好）。

Answer 3

好吧，您当前的代码不起作用，因为您没有将所选值存储在另一个下拉列表中。此外，正如其他人所说，使用hide和show而不是detach和prepend。

你可以在jsfiddle中看到我的解决方案（在firefox中测试）