如何使用另一个 select 框的 selected 值填充 select 框

Question

我有一个 multiselect select 框，其值类似于 Object_1、Object_2... Object_10。当我在 selecting 值后单击按钮时，我可以在下面写 selected 值，但我想用这些 selected 值填充另一个 select 框。

这是我的 select 框代码：

  <body style="background-color: azure;" ng-app="app">
    <div id="container" style="padding: 50px 100px 50px 200px; width: 80%" ng-controller="ctrl">
        <div class="block" style="padding: 15px;">
            <h4 class="blockTitle">Rule Builder</h4>
            <br />
            <div class="row">
                <div class="col-md-2">
                    <button class="btn btn-default" id="objct">Show Objects</button>
                    <script>
                        $(document).ready(function(){
                            $('#objct').click(function(){
                                $('#objList').show();
                            })                            
                        })
                    </script>
                </div>
                <div class="col-md-5" id="objList" style="display: none;height: auto; width: 200px;" >
                    <select class="SlectBox" size="8" multiple="multiple" title="Select objects">
                        <option value="Object_1">Object 1</option>
                        <option value="Object_2">Object 2</option>
                        <option value="Object_3">Object 3</option>
                        <option value="Object_4">Object 4</option>
                        <option value="Object_5">Object 5</option>
                        <option value="Object_6">Object 6</option>
                        <option value="Object_7">Object 7</option>
                        <option value="Object_8">Object 8</option>
                        <option value="Object_9">Object 9</option>
                        <option value="Object_10">Object 10</option>
                        <option value="Object_11">Object 11</option>
                    </select>
                    <br />
                    <br />
                    <button id="close" class="btn btn-default" style="float: right">OK</button>
                </div>
            </div>
            <br /><br />
            <p id="list"></p>
            <script type="text/javascript">
                $(function () {
                    $('#SlectBox').multiselect({
                        includeSelectAllOption: true
                    });
                    $('#close').click(function(){
                        var objs = [];
                        $.each($(".SlectBox option:selected"), function(){            
                            objs.push($(this).val());
                        });
                        $( '#list' ).html(objs.join(", "));
                    });
                });
            </script>
            <br /><hr /><br />
            <select id="selctObjs" multiple="multiple" size="1">
                //Here I want to populate the list
            </select>
            <br /><br />
            <br /><br />
        </div>
    </div>
</body>

我 select 在带有 class="SlectBox" 的 select 框中应该填充在带有 id="selctObjs" 的 select 框中。

有人能帮帮我吗？

Answer 1

尝试

 $('#close').click(function () {
     var objs = $(".SlectBox option:selected").map(function () {
         return this.value;
     }).get();
     $('#list').html(objs.join(", "));

     $("#selctObjs").html($(".SlectBox option:selected").clone());
 });

DEMO

Answer 2

试试这个：

    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<body style="background-color: azure;" ng-app="app">
    <div id="container" style="padding: 50px 100px 50px 200px; width: 80%" ng-controller="ctrl">
        <div class="block" style="padding: 15px;">
            <h4 class="blockTitle">Rule Builder</h4>
            <br />
            <div class="row">
                <div class="col-md-2">
                    <button class="btn btn-default" id="objct">Show Objects</button>
                </div>
                <div class="col-md-5" id="objList" style="height: auto; width: 200px;" >
                    <select class="SlectBox" size="8" multiple="multiple" title="Select objects">
                        <option value="Object_1">Object 1</option>
                        <option value="Object_2">Object 2</option>
                        <option value="Object_3">Object 3</option>
                        <option value="Object_4">Object 4</option>
                        <option value="Object_5">Object 5</option>
                        <option value="Object_6">Object 6</option>
                        <option value="Object_7">Object 7</option>
                        <option value="Object_8">Object 8</option>
                        <option value="Object_9">Object 9</option>
                        <option value="Object_10">Object 10</option>
                        <option value="Object_11">Object 11</option>
                    </select>
                    <br />
                    <br />
                    <button id="close" class="btn btn-default" style="float: right">OK</button>
                </div>
            </div>
            <br /><br />
            <p id="list"></p>
            <script type="text/javascript">
                $(function () {
                    $('#objList').hide();
                    $('#objct').click(function(){

                        $('#objList').show();
                    }) 


                    $('#close').click(function(){
                        var objs = [];
                        var html = '';
                        $.each($(".SlectBox option:selected"), function(){            
                            objs.push($(this).val());
                            html += '<option value="'+$(this).val()+'">'+$(this).html()+'</option>';
                        });
                        $( '#list' ).html(objs.join(", "));
                        $('#selctObjs').html(html);
                    });
                });
            </script>
            <br /><hr /><br />
            <select id="selctObjs" multiple="multiple" size="1">

            </select>
            <br /><br />
            <br /><br />
        </div>
    </div>
</body>

Answer 3

据我所知，您正在从每个选定的选项中获取值并将它们放入一个数组中。您还可以从这些对象中添加 html 并将它们也放入数组中。

之后，我将遍历整个数组并执行如下操作：

var $selctObjs = $('#selctObjs');
objs.forEach(function(entry) {
    $selctObjs.append('<option value='+ entry.value +' >'+entry.html +'</option>');
});

希望有用。

Answer 4

您只需替换以下标签：

 <select class="SlectBox" size="8" multiple="multiple" title="Select objects">

至

<select class="SlectBox" size="8" multiple="multiple" title="Select objects" onchange="qq(this)">

然后定义一个名为qq的函数

function qq(v)
{
   alert(v.options[v.selectedIndex].value); //it prompt the select value.
}

Answer 5

另一种解决方案：

http://jsfiddle.net/wxfa98q1/

$('#close').click(function(){
    // Resize the select
    $('#selctObjs').attr('size',$(".SlectBox option:selected").length);
    // Empty children
    $('#selctObjs').empty();
    // For each selected options create one on the other select
    $.each($(".SlectBox option:selected"),function (i, item) {
            $('#selctObjs').append($('<option>', { 
                value: item.value,
                text : item.text 
            }));
     });
});

Answer 6

根据我的说法，您的代码工作正常，只是出现 $('#SlectBox').multiselect({ includeSelectAllOption: true }); 的错误这行代码。您使用过任何 jquery 插件吗？

请检查我修改后的代码

fiddle link

html

<body style="background-color: azure;" ng-app="app">
<div id="container" style="padding: 50px 100px 50px 200px; width: 80%" ng-controller="ctrl">
    <div class="block" style="padding: 15px;">
        <h4 class="blockTitle">Rule Builder</h4>
        <br />
        <div class="row">
            <div class="col-md-2">
                <button class="btn btn-default" id="objct">Show Objects</button>
                <script>
                    $(document).ready(function(){
                        $('#objct').click(function(){
                            $('#objList').show();
                        })                            
                    })
                </script>
            </div>
            <div class="col-md-5" id="objList" style="display: none;height: auto; width: 200px;" >
                <select class="SlectBox" size="8" multiple="multiple" title="Select objects">
                    <option value="Object_1">Object 1</option>
                    <option value="Object_2">Object 2</option>
                    <option value="Object_3">Object 3</option>
                    <option value="Object_4">Object 4</option>
                    <option value="Object_5">Object 5</option>
                    <option value="Object_6">Object 6</option>
                    <option value="Object_7">Object 7</option>
                    <option value="Object_8">Object 8</option>
                    <option value="Object_9">Object 9</option>
                    <option value="Object_10">Object 10</option>
                    <option value="Object_11">Object 11</option>
                </select>
                <br />
                <br />
                <button id="close" class="btn btn-default" style="float: right">OK</button>
            </div>
        </div>
        <br /><br />
        <p id="list"></p>
        <br /><hr /><br />
        <select id="selctObjs">
            //Here I want to populate the list
        </select>
        <br /><br />
        <br /><br />
    </div>
</div>

javascript

`$(函数(){

                $('#close').click(function(){
                    var objs = [];
                    var optionList = "";
                    $.each($(".SlectBox option:selected"), function(){            
                        objs.push($(this).val());
                    });
                    $( '#list' ).html(objs.join(", "));
                    $("#selctObjs").html("");

                    $.each(objs,function(index){
                        optionList=optionList+"<option>"+objs[index]+"</option>"
                    })
                    $("#selctObjs").html(optionList);
                });
            });`

如何使用另一个 select 框的 selected 值填充 select 框

How to populate a select box with the selected values of another select box

html

javascript

jquery

drop-down-menu