如何用另一个选择框的选定值填充一个选择框
How to populate a select box with the selected values of another select box
我有一个多选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"。
试试这个:
<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>
另一个解决方案:
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
}));
});
});
从我看到的，您正在从每个选定的选项中获取值，并将它们放入数组中。您也可以从这些对象中添加html，并将它们放入数组中。
之后，我将遍历整个数组并执行如下操作:
var $selctObjs = $('#selctObjs');
objs.forEach(function(entry) {
$selctObjs.append('<option value='+ entry.value +' >'+entry.html +'</option>');
});
希望对大家有用
您只需替换以下标签:
<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.
}
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());
});
据我所知，您的代码工作正常，仅获得$('#SlectBox').multiselect({
includeSelectAllOption: true
});错误这一行代码。你用过jquery插件吗?
请查看我修改后的代码
小提琴联系