jquery - Jquery select option copy 产生不同的输出

Question

我正在尝试从 复制dropdown到one，another但是当它appends会options从previous one. 为什么？

我的代码是：

HTML：

<select id="dropdown" multiple="multiple">
  <option value="1">Opt 1</option>
  <option value="2">Opt 2</option>
  <option value="3">Opt 3</option>
</select>
<select id="options2"></select>

脚本：

$(document).ready(function(){
    $('#dropdown').on('change',function(){
        $("#dropdown option:selected").each(function(){
            $("#options2").append($(this));            
        });
    });    
});

小提琴 http://jsfiddle.net/5BU4T/

Answer 1

获取元素的克隆，然后追加。

$("#options2").append($(this).clone()); 

Answer 2

使用.clone()并记住忽略重复项。

 $(document).ready(function(){
    $('#dropdown').on('change',function(){
        $("#dropdown option:selected").each(function(){
            var vThis = $(this);
            // check if already added in the dropdown, dont append again
            var toAppend = true;
            $('#options2 option').each(function(){
                    if($(this).val() == vThis.val())
                    {
                        toAppend = false;
                        return;
                    }
            });

            if(toAppend == true)
                $("#options2").append(vThis.clone());     
        });
    });    
});

Answer 3

尝试这个 ：

$(document).ready(function(){
    $('#dropdown').on('change',function(){
        $("#dropdown option:selected").each(function(){
            if(!$("#options2 option[value="+$(this).val()+"]").length)
            //to remove redundancy
               $("#options2").append($(this).clone());            
        });
    });    
});

Answer 4

尝试

$("#options2").append("<option value='"+$(this).html()+"'>"+$(this).html()+"</option>");