堆棧內存溢出
  簡體   English   中英

如何用另一個選擇框的選定值填充一個選擇框

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

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

問題描述

我有一個多select框，其值類似於Object_1，Object_2 ... Object_10。 選擇值后單擊按鈕時，可以在下面寫入所選值，但是我想用這些所選值填充另一個選擇框。

這是我的選擇框代碼： 

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

我在選擇框中使用class="SlectBox"選擇的內容應在選擇框中填充id="selctObjs" 。

誰能幫我嗎？

6 個解決方案

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

嘗試這個： 

    <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

另一個解決方案：

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

嘗試 

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

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

演示

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

據我所知，您正在從每個選定選項中獲取值並將它們放入數組中。 您也可以從這些對象中添加html並將它們放入數組中。

之后，我將遍歷整個數組並執行以下操作： 

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

希望它有用。

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

您只需替換以下標記： 

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

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

根據我的說法，您的代碼工作正常，僅在$('#SlectBox').multiselect({ includeSelectAllOption: true });出錯時有效$('#SlectBox').multiselect({ includeSelectAllOption: true }); 這行代碼。 你有沒有使用過jQuery插件？

請檢查我修改的代碼

小提琴鏈接

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

`$（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，如何用另一個選擇框值填充一個選擇框 如何填充 <s:select> 框根據另一個的選定值 <s:select> 框 更改另一個選擇框的值時如何在一個選擇框中填充值 根據另一個選擇框填充選擇框 從另一個選擇框中動態填充選擇框的值 連接選擇框選定的值 在選擇框中更改選擇的值 如何用jQuery填充選擇框？ 如何使用 Javascript 填充選擇框 如何根據另一個選擇框上的內容填充選擇框？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM