堆栈内存溢出
  简体   繁体   English

如何用另一个选择框的选定值填充一个选择框

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

 原文  2015-06-11 09:05:47  9   6    javascript/ jquery/ html/ drop-down-menu

问题描述

I have a multiselect select box whose values are something like Object_1, Object_2... Object_10. 我有一个多select框，其值类似于Object_1，Object_2 ... Object_10。 When I click a button after selecting values, I can write selected values below, but I want to populate another select box with those selected values. 选择值后单击按钮时，可以在下面写入所选值，但是我想用这些所选值填充另一个选择框。

Here is my code for the select box: 这是我的选择框代码： 

  <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>

What I select in the select box with the class="SlectBox" should be populate in the select box with id="selctObjs" . 我在选择框中使用class="SlectBox"选择的内容应在选择框中填充id="selctObjs" 。

Can anyone help me please? 谁能帮我吗？

6 个解决方案

解决方案1
 2  2015-06-11 09:16:42

Try this: 尝试这个： 

    <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>

解决方案2
 1 已采纳  2015-06-11 09:20:09

Yet another solution : 另一个解决方案：

http://jsfiddle.net/wxfa98q1/ 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 
            }));
     });
});

解决方案3
 0  2015-06-11 09:15:26

try 尝试 

 $('#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 演示

解决方案4
 0  2015-06-11 09:18:40

From what I see you are getting the values from each selected option and putting them into an array. 据我所知，您正在从每个选定选项中获取值并将它们放入数组中。 You could also add the html from those objects and put them in the array as well. 您也可以从这些对象中添加html并将它们放入数组中。

After that, I'd go through the entire array and do something like this: 之后，我将遍历整个数组并执行以下操作： 

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

Hope it's useful. 希望它有用。

解决方案5
 0  2015-06-11 09:18:59

You just replace the following tag: 您只需替换以下标记： 

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

to 至 

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

And then define a function named qq 然后定义一个名为qq的函数 

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

解决方案6
 0  2015-06-11 11:33:16

According to me your code is working fine only getting error for $('#SlectBox').multiselect({ includeSelectAllOption: true }); 根据我的说法，您的代码工作正常，仅在$('#SlectBox').multiselect({ includeSelectAllOption: true });出错时有效$('#SlectBox').multiselect({ includeSelectAllOption: true }); this line of codes. 这行代码。 Have you used any jquery plugin? 你有没有使用过jQuery插件？

Please check my modified code 请检查我修改的代码

fiddle link 小提琴链接

html 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 javascript

`$(function () { `$（function（）{ 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 jQuery，如何用另一个选择框值填充一个选择框 - jquery, How to populate a select box with another select box values 如何填充 <s:select> 框根据另一个的选定值 <s:select> 框 - How to populate a <s:select> box according to the selected value of the another <s:select> box 更改另一个选择框的值时如何在一个选择框中填充值 - How can we populate values in one select box when changing values of another select box 根据另一个选择框填充选择框 - populate select box based on the another select box 从另一个选择框中动态填充选择框的值 - Populate the values of select boxes dynamically from another select box 连接选择框选定的值 - Concatenate select box selected values 在选择框中更改选择的值 - changing selected values in select box 如何用jQuery填充选择框？ - how to populate select box with jquery? 如何使用 Javascript 填充选择框 - How to populate a select box with Javascript 如何根据另一个选择框上的内容填充选择框？ - How do I populate a select box depending on what was selected on the other select box?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM