jquery - Jqueryの選択オプションのコピーは異なる出力を作成します

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

試す

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

Answer 3

を使用.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 4

これを試して ：

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