jquery 引导-选择添加项并选择它

zqdjd7g9  于 2023-01-25  发布在  jQuery
关注(0)|答案(4)|浏览(107)

我用的是西尔维奥·莫雷托的Bootstrap Select。
在我的页面上,我有一个按钮,它打开一个模态输入框,允许你添加一个项目到selectpicker,然后我想自动选择该项目,但我不能让它工作。
我的密码是:

$('#myselect').append('<option val="'+newitemnum+'">'+newitemdesc+'</option>');
$('#myselect').val(newitemnum);
$('#myselect').selectpicker('refresh');

但它就是不起作用。项目没有被选中。
我已尝试将选择行替换为:

$('#myselect').selectpicker('val',newitemnum);

但那也没用
任何想法非常赞赏(虽然项目确实得到添加到选择器)。

xzabzqsa

xzabzqsa1#

它的工作在搜索和多选selectpiker:

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

8mmmxcuj2#

您可以使用jQuery select2.Eg轻松地完成此操作。

<select class="form-control" id="tagsExample">
  <option selected="selected">orange</option>
  <option>white</option>
  <option>purple</option>
</select>

$("#tagsExample").select2({
  tags: true
});

参考:https://select2.org/tagging

vmpqdwk3

vmpqdwk33#

您有一个打字错误。而不是:

$('#myselect').append('<option val="'+newitemnum+'">'+newitemdesc+'</option>');

您需要:

$('#myselect').append('<option value="'+newitemnum+'">'+newitemdesc+'</option>');

下面是一个JSFiddle演示:http://jsfiddle.net/xbr5agqt/
"添加并选择"酱油"选项"按钮执行以下操作:

$("#myselect").append('<option value="'+newitemnum+'">'+newitemdesc+'</option>');
$("#myselect").val(4);
$("#myselect").selectpicker("refresh");

一种稍微快一点的方法(由"Add and select 'Relish' option"按钮使用)是在新元素后面附加已经应用的selected属性: element with the selected attribute already applied:

$("#myselect").append('<option value="'+newitemnum+'" selected="">'+newitemdesc+'</option>');
$("#myselect").selectpicker("refresh");
1sbrub3j

1sbrub3j4#

用于在bootstrap-selectpicker中动态添加optionsappendoption添加到selectrefreshselectpicker添加到

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

为了更好地执行此操作,请在append选项中添加selected属性

// Append the option to select
$('#myselect').append('<option value="'+newitemnum+'" selected>'+newitemdesc+'</option>');

相关问题