bootstrap-select 添加项目并 select 它
bootstrap-select add item and select it
我正在使用 Silvio Moreto 的 Bootstrap Select。
在我的页面上,我有一个按钮可以打开带有输入框的模式,允许您将项目添加到选择器。然后我想自动选择该项目,但我无法让它工作。
我的密码是:
$('#myselect').append('<option val="'+newitemnum+'">'+newitemdesc+'</option>');
$('#myselect').val(newitemnum);
$('#myselect').selectpicker('refresh');
但这就是行不通。该项目未被选中。
我尝试用 :
替换选择行
$('#myselect').selectpicker('val',newitemnum);
但这也不管用
非常感谢任何想法(尽管该项目确实被添加到选择器中)。
你打错了。而不是:
$('#myselect').append('<option val="'+newitemnum+'">'+newitemdesc+'</option>');
你需要:
$('#myselect').append('<option value="'+newitemnum+'">'+newitemdesc+'</option>');
这是一个 JSFiddle 演示:http://jsfiddle.net/xbr5agqt/
"Add and select 'Soy Sauce' option" 按钮执行以下操作:
$("#myselect").append('<option value="'+newitemnum+'">'+newitemdesc+'</option>');
$("#myselect").val(4);
$("#myselect").selectpicker("refresh");
一种稍快的方法(由 "Add and select 'Relish' option" 按钮使用)是在新的
$("#myselect").append('<option value="'+newitemnum+'" selected="">'+newitemdesc+'</option>');
$("#myselect").selectpicker("refresh");
用于在bootstrap-selectpicker
中动态添加options
,append
option
到select
和refresh
selectpicker
$(document).on('click','#addOptions',function(){
var newitemnum = Math.floor(Math.random() * 100) + 1;
var newitemdesc = "Item "+ newitemnum;
// Append the option to select
$('#myselect').append('<option value="'+newitemnum+'">'+newitemdesc+'</option>');
// Set the select value with new option
$("#myselect").val(newitemnum);
// Refresh the selectpicker
$("#myselect").selectpicker("refresh");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
<select name="myselect[]" class="selectpicker" id="myselect">
<option value="A1">Anatomy</option>
<option value="A2">Anesthesia</option>
<option value="A3">Biochemistry</option>
<option value="A4">Community Medicine</option>
<option value="A5">Dermatology</option>
<option value="A6">ENT</option>
</select>
<button id="addOptions" class="btn btn-success">Add</button>
为了更好,在附加选项中添加 selected
属性
// Append the option to select
$('#myselect').append('<option value="'+newitemnum+'" selected>'+newitemdesc+'</option>');
它正在研究可搜索和多选选择器:
<select id="mySelect" class="selectpicker show-menu-arrow" multiple data-live-search="true" title="Persons"
data-selected-text-format="static" data-actions-box="true">
</select>
<script>
$(document).ready(function () {
for (let i = 0; i < 20; i++)
$("#mySelect").append(
`<option value="${i}">person ${i}</option>`
);
$("#mySelect").selectpicker("refresh");
$('.bs-select-all').html("All");
$('.bs-deselect-all').html("Nothing");
});
</script>
我正在使用 Silvio Moreto 的 Bootstrap Select。
在我的页面上,我有一个按钮可以打开带有输入框的模式,允许您将项目添加到选择器。然后我想自动选择该项目,但我无法让它工作。
我的密码是:
$('#myselect').append('<option val="'+newitemnum+'">'+newitemdesc+'</option>');
$('#myselect').val(newitemnum);
$('#myselect').selectpicker('refresh');
但这就是行不通。该项目未被选中。
我尝试用 :
替换选择行$('#myselect').selectpicker('val',newitemnum);
但这也不管用
非常感谢任何想法(尽管该项目确实被添加到选择器中)。
你打错了。而不是:
$('#myselect').append('<option val="'+newitemnum+'">'+newitemdesc+'</option>');
你需要:
$('#myselect').append('<option value="'+newitemnum+'">'+newitemdesc+'</option>');
这是一个 JSFiddle 演示:http://jsfiddle.net/xbr5agqt/
"Add and select 'Soy Sauce' option" 按钮执行以下操作:
$("#myselect").append('<option value="'+newitemnum+'">'+newitemdesc+'</option>');
$("#myselect").val(4);
$("#myselect").selectpicker("refresh");
一种稍快的方法(由 "Add and select 'Relish' option" 按钮使用)是在新的
$("#myselect").append('<option value="'+newitemnum+'" selected="">'+newitemdesc+'</option>');
$("#myselect").selectpicker("refresh");
用于在bootstrap-selectpicker
中动态添加options
,append
option
到select
和refresh
selectpicker
$(document).on('click','#addOptions',function(){
var newitemnum = Math.floor(Math.random() * 100) + 1;
var newitemdesc = "Item "+ newitemnum;
// Append the option to select
$('#myselect').append('<option value="'+newitemnum+'">'+newitemdesc+'</option>');
// Set the select value with new option
$("#myselect").val(newitemnum);
// Refresh the selectpicker
$("#myselect").selectpicker("refresh");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
<select name="myselect[]" class="selectpicker" id="myselect">
<option value="A1">Anatomy</option>
<option value="A2">Anesthesia</option>
<option value="A3">Biochemistry</option>
<option value="A4">Community Medicine</option>
<option value="A5">Dermatology</option>
<option value="A6">ENT</option>
</select>
<button id="addOptions" class="btn btn-success">Add</button>
为了更好,在附加选项中添加 selected
属性
// Append the option to select
$('#myselect').append('<option value="'+newitemnum+'" selected>'+newitemdesc+'</option>');
它正在研究可搜索和多选选择器:
<select id="mySelect" class="selectpicker show-menu-arrow" multiple data-live-search="true" title="Persons"
data-selected-text-format="static" data-actions-box="true">
</select>
<script>
$(document).ready(function () {
for (let i = 0; i < 20; i++)
$("#mySelect").append(
`<option value="${i}">person ${i}</option>`
);
$("#mySelect").selectpicker("refresh");
$('.bs-select-all').html("All");
$('.bs-deselect-all').html("Nothing");
});
</script>