我在使用Bootstrap-select在另一个多个下拉列表中动态选择一个选项时遇到问题。 我想将在“方框一”中选择的项目附加到已在“方框二”中选择的项目。
我已经能够通过手动添加它们来选择多个:
$('select#one').on('change', function() {
$('#two').selectpicker('val', ['TestA','TestB','','TestC']);
$('#two').selectpicker('refresh');
});
抓住已经选中的那些:
$('select#one').on('change', function() {
var existingValues = $("#two").val() || [];
alert(existingValues);
});
问题是我似乎无法将所有这些加在一起。这不起作用,但它显示了我正在寻找的东西:
$('select#one').on('change', function() {
var selectedOption = $(this).find(":selected").text();
var existingValues = $("#two").val() || [];
var newValues = selectedOption+','+existingValues;
var newValues = '\''+newValues.replace(/,/g, '\',\'')+'\''; //didnt help
alert(newValues);
$('#two').selectpicker('val', [newValues]);
$('#two').selectpicker('refresh');
});
小提取工作,但替换值而不是将其添加到选定的值:https://jsfiddle.net/3tx8mzqn/
答案 0 :(得分:1)
这很有效。
$("#one").on("change",function(event, clickedIndex, newValue, oldValue){
var select2values = $("#two").val();
var value = $(this).val();
if(select2values.indexOf(value)==-1)
{
select2values.push(value);
$("#two").val(select2values);
}
$("#two").selectpicker('refresh');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<select class="selectpicker" data-style="btn-danger" data-width="150px" title="box one" id="one" name="one" required>
<option value="TestA">TestA</option>
<option value="TestB">TestB</option>
<option value="TestC">TestC</option>
<option value="TestD">TestD</option>
<option value="TestE">TestE</option>
<option value="TestF">TestF</option>
</select>
<select class="selectpicker" data-style="btn-primary" data-width="fit" multiple title="box two" id="two" name="two" required>
<option value="TestA">TestA</option>
<option value="TestB">TestB</option>
<option value="TestC">TestC</option>
<option value="TestD">TestD</option>
<option value="TestE">TestE</option>
<option value="TestF">TestF</option>
</select>