複数選択プラグインが選択されていません

Question

ブートストラップmulti-select.jsを使用して、選択ボックスから複数のオプションを選択します。私は、複数のオプションを選択しないでボタンをクリックしたときに試しました。以下の私のコードです：

// bootstrap multiselect box 
 
$(document).ready(function() { 
 
    $('#ddlPermission').multiselect({ 
 
    buttonWidth : '100%', 
 
    maxHeight : 100, 
 
    includeSelectAllOption : true, 
 
    dropRight : true 
 
    }); 
 
    $(".clickbutton").click(function(){ \t 
 
    \t $('.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>

Answer 1

あなたはその後、複数選択をリフレッシュし、ドロップダウンのid代わりclassのに選択を適用する必要があります。

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

// bootstrap multiselect box 
 
$(document).ready(function() { 
 
    $('#ddlPermission').multiselect({ 
 
    buttonWidth : '100%', 
 
    maxHeight : 100, 
 
    includeSelectAllOption : true, 
 
    dropRight : true 
 
    }); 
 
    $(".clickbutton").click(function(){ \t 
 
    \t $('#ddlPermission').val(['A','B']); 
 
     $('#ddlPermission').multiselect("refresh"); 
 
    }); 
 
}); 
 
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://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>