如何在 Bootstrap-select 的另一个多值下拉列表中添加 selected 项
How to add selected item in another multiple value dropdown in Bootstrap-select
我在使用 Bootstrap-select 在另一个多个下拉列表中动态选择一个选项时遇到问题。
我想将 "box one" 中选择的项目附加到 "box two" 中已选择的项目。
我已经能够通过手动添加来选择多个:
$('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');
});
Fiddle 有效,但会替换值而不是将其添加到所选值:https://jsfiddle.net/3tx8mzqn/
这有效。
$("#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>
我在使用 Bootstrap-select 在另一个多个下拉列表中动态选择一个选项时遇到问题。 我想将 "box one" 中选择的项目附加到 "box two" 中已选择的项目。
我已经能够通过手动添加来选择多个:
$('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');
});
Fiddle 有效,但会替换值而不是将其添加到所选值:https://jsfiddle.net/3tx8mzqn/
这有效。
$("#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>