Question

我有一个select框，我从multiple获取Array个值并使用JQuery将其存储在Array中。

我想知道如何使用此options的内容在另一个选择框中填充$('#addBtn').click(function(e){ e.preventDefault(); //Get the selected Items in the dropdown 1 var selected = new Array(); $('#compresult option:selected').each(function(){ selected.push($(this).val() + " " + $(this).text());//Add to Array }); //Update contents of dropdown 2 with the Array });。

所以目前我已经有了这个：

HTML

我的<select multiple="multiple" name="contributors[]" id="compresult"> <option value="0"></option> <option value="3610">X</option> <option value="3605">Y</option> <option value="335">Z</option> </select>下拉列表是：

selected

如果我选择选项X和Y，我的JS代码中的Array [ "3610 X", "3605 Y" ]数组会输出：

<select multiple="multiple" name="dropdown2" id="compresult">
        <option value="3610">X</option>
        <option value="3605">Y</option>
</select>

如何使用这些值填充另一个下拉列表？我正在尝试从列表功能类型的东西实现ADD / REMOVE。

编辑：DROPDOWN 2的预期输出

{{1}}

Answer 1

ID应该是唯一的id="compresult">

 $('#addBtn').click(function (e) {
    e.preventDefault();

    var selected = $('#compresult option:selected').clone(); // get the selected option and copy that element 
    $("#compresult1").html(selected); // insert into new dropdown list 

});

UPDATED DEMO

Answer 2

只需在循环中构建html字符串：

$('#addBtn').click(function(e){
    e.preventDefault();
    //Get the selected Items in the dropdown 1
    var drop2html = '';
    $('#compresult option:selected').each(function(){
        drop2html += '<option value="' + $(this).val() + '">' + $(this).text() + '</option>';
    });

    $('#drop2').html(drop2html);
});

Answer 3

将push行更改为

selected.push([$(this).val(), $(this).text()]);

...所以我们将选项值和文本分开保存，而不是连接成一个字符串。

然后，要创建新的select（如果你想创建一个新的或填充现有的那个，你不会说 - 我会假设后者）：

var other_sel = $('#other_select').empty();
$.each(selected, function(i, arr) {
    $('<option /', {value: arr[0], text: arr[1]}).appendTo(other_sel);
});

使用JQuery从Array设置select选项值和文本

3 个答案:

UPDATED DEMO