多选插件未选择

时间:2017-11-28 13:16:01

标签: javascript jquery

使用引导程序multi-select.js从选择框中选择多个选项。我试过,当我点击按钮时多个选项没有选择。下面是我的代码:

// bootstrap multiselect box
$(document).ready(function() {
  $('#ddlPermission').multiselect({
    buttonWidth : '100%',
    maxHeight : 100,
    includeSelectAllOption : true,
    dropRight : true
  });  
  $(".clickbutton").click(function(){	
  	$('.multiselect').val(['A','B']);
  });  
});
function myFunction() {
  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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<link href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<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="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
</select>
<input type="submit" name="btnSubmit" id="btnSubmit" onclick="myFunction()" class="button active" value="Submit">
</div>

1 个答案:

答案 0 :(得分:2)

您需要将选择应用于下拉列表id而不是class,然后刷新多选项。

$('#ddlPermission').val(['A','B']);
$('#ddlPermission').multiselect("refresh");

&#13;
&#13;
// bootstrap multiselect box
$(document).ready(function() {
  $('#ddlPermission').multiselect({
    buttonWidth : '100%',
    maxHeight : 100,
    includeSelectAllOption : true,
    dropRight : true
  });  
  $(".clickbutton").click(function(){	
  	$('#ddlPermission').val(['A','B']);
        $('#ddlPermission').multiselect("refresh");
  });  
});
function myFunction() {
  var allVal=$("#ddlPermission").val();
  alert(allVal);
  return false;
}
&#13;
<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 href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<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="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
</select>
<input type="submit" name="btnSubmit" id="btnSubmit" onclick="myFunction()" class="button active" value="Submit">
</div>
&#13;
&#13;
&#13;