用于选定值的 JQuery Bootstrap 多选插件

Question

我正在使用 JQuery Bootstrap Multiselect 插件在输入中进行多项选择。现在我面临的问题是，当我单击“显示选项”按钮时，如果我想在多选功能中设置默认值 2,3（彼得，简），那么该值不会显示在输入字段中.

下面是我想要的结果：

以下是我尝试过的编码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />


<select id="ahli_ahli" class="selectpicker" multiple data-live-search="true">
  <option value="1">John</option>
  <option value="2">Peter</option>
  <option value="3">Jane</option>
</select><br><br><br>


<button type="button" class="btn btn-sm btn-primary create-permission" id="btn_save" value="Save" onclick="show()">Show Option</button>
<script>
$(document).ready(function(){
     $('#ahli_ahli').multiselect({
      nonSelectedText: 'Pilih ahli-ahli',
      enableFiltering: true,
      enableCaseInsensitiveFiltering: true,
      buttonWidth:'100%'
     });
    });

function show(){
    var data="2,3";
  var dataarray=data.split(",");
  $("#ahli_ahli").val(dataarray);
 // console.log(dataarray);
}
</script>

下面这个方法我用过，但是不行。

function show(){
    var data="2,3";
  var dataarray=data.split(",");
  $("#ahli_ahli").val(dataarray);
}

希望有人可以指导我如何解决它。谢谢。

Answer 1

您可以简单地在特定选项字段中添加选定的属性。并刷新多选

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />


<select id="ahli_ahli" class="selectpicker" multiple data-live-search="true">
  <option value="1">John</option>
  <option value="2">Peter</option>
  <option value="3">Jane</option>
</select><br><br><br>


<button type="button" class="btn btn-sm btn-primary create-permission" id="btn_save" value="Save" onclick="show()">Show Option</button>
<script>
$(document).ready(function(){
     $('#ahli_ahli').multiselect({
      nonSelectedText: 'Pilih ahli-ahli',
      enableFiltering: true,
      enableCaseInsensitiveFiltering: true,
      buttonWidth:'100%'
     });
    });

function show(){ 
  var selValues = $('#ahli_ahli').val(); 
  selValues.push("2")
  selValues.push("3"); 
  $("#ahli_ahli").multiselect("select",selValues);
     
}
</script>