javascript - 使用 bootstrap-multiselect 在多选框中添加选项

Question

在我的加载页面上，我试图将选项添加到多选框，但是当我附加到选择框时，它没有被添加。

$(document).ready(function() {
  var masterobj = [{
    "employee_name": "headthree",
    "employee_id": "203"
  }];

  $('#ddlPermission').multiselect({
    buttonWidth: '100%',
    maxHeight: 100,
    includeSelectAllOption: true,
    dropRight: true
  });
  
  $(".clickbutton").click(function() {
    $('#ddlPermission').val(['A', 'B']);
    $('#ddlPermission').multiselect("refresh");
  });

  $.each(masterobj, function(key, value) {
    $('.multiselect')
      .append($("<option></option>")
        .attr("value", value.employee_id)
        .text(value.employee_name));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="https://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" />
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-2">
      <input class="form-control btn-primary clickbutton" type="button" name="select" id="select" value="Click">
    </div>
  </div><br>
  <select id="ddlPermission" class="multiselect" multiple="multiple" name="permission_ddl">
  <option value="201">headone</option>
  <option value="202">headtwo</option>
</select>
  <input type="submit" name="btnSubmit" id="btnSubmit" onclick="myFunction()" class="button active myfunction" value="Submit">
</div>

FIDDLE

我需要在加载页面时将选项附加到 multiselect 框中。

Answer 1

给你，你的问题是你应该在 initialize multiselect

之前追加数据

// bootstrap multiselect box
$(document).ready(function() {

var masterobj = [{"employee_name":"headthree","employee_id":"203"}];

   $.each(masterobj, function(key, value) {   
     $('.multiselect')
         .append($("<option></option>")
                    .attr("value",value.employee_id)
                    .text(value.employee_name)); 
});

  $('#ddlPermission').multiselect({
    buttonWidth : '100%',
    maxHeight : 100,
    includeSelectAllOption : true,
    dropRight : true
  });  
 $(".clickbutton").click(function(){	
  	$('#ddlPermission').val(['A','B']);
        $('#ddlPermission').multiselect("refresh");
  });
 
});
/*
     $(".myfunction").click(function(){	
     var allVal=$("#ddlPermission").val();
  alert(allVal);
  return false;
   
   });
*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="https://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" />

<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
<input class="form-control btn-primary clickbutton" type="button" name="select" id="select" value="Click">
</div>
</div>
<br>
<select id="ddlPermission" class="multiselect" multiple="multiple" name="permission_ddl">
  <option value="201">headone</option>
  <option value="202">headtwo</option>
</select>
<input type="submit" name="btnSubmit" id="btnSubmit"  class="button active myfunction" value="Submit">
</div>

Working Demo