多選 function 中顯示的值不正確

Question

我在多選 function 中有 2 個問題：

i)第一個問題，我設置的值如果點擊Show Volvo and Opel和Show Volvo and Saav按鈕，將遵循多選框中顯示的值。 現在的錯誤是如果單擊Show Volvo and Opel按鈕，它可以顯示正確的值，但如果單擊Show Volvo and Saav按鈕，則無法正確顯示該值。

ii)第二個問題，如果我點擊Show Volvo and Opel ，它只能在多選框中顯示checked的值，名稱的值不能在多選框中顯示，例如我需要顯示名稱Volvo, Opel如下圖：

以下是我的示例工作編碼：

 $(document).ready(function(){ $('#cars').multiselect({ nonSelectedText: 'Choose the car', enableFiltering: true, enableCaseInsensitiveFiltering: true, buttonWidth:'100%' }); }); function sendFunc(){ $(this).prop('checked',false); var cars = []; var cars = ["volvo", "opel"]; for(var i = 0; i < cars.length;i++) { $(':checkbox[value="'+cars[i]+'"]').prop('checked', 'checked'); } } function sendFunc_2(){ $(this).prop('checked',false); var cars = []; var cars = ["volvo", "saab"]; for(var i = 0; i < cars.length;i++) { $(':checkbox[value="'+cars[i]+'"]').prop('checked', 'checked'); } }

 <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="cars" value="" multiple> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> <br><br><br> <button type="button" class="btn btn-sm btn-primary create-permission" id="btn_save" value="Save" onclick="sendFunc()">Show Volvo and Opel</button> <button type="button" class="btn btn-sm btn-primary create-permission" id="btn_save" value="Save" onclick="sendFunc_2()">Show Volvo and Saav</button>

希望有人能指導我如何解決這個問題。

Answer 1

您可以遍歷選擇框內的選項以及value與 set prop('selected', true);匹配的位置。 然后使用$('#cars').multiselect('refresh')刷新您的多選。

演示代碼：

 $(document).ready(function() { $('#cars').multiselect({ nonSelectedText: 'Choose the car', enableFiltering: true, enableCaseInsensitiveFiltering: true, buttonWidth: '100%' }); }); function sendFunc() { call_to_deleselect(); var cars = ["volvo", "opel"]; call_to_set_Selected(cars) } function sendFunc_2() { call_to_deleselect(); var cars = ["volvo", "saab"]; call_to_set_Selected(cars) } function call_to_deleselect() { //remove all selected $('option', $('#cars')).each(function(element) { $(this).removeAttr('selected').prop('selected', false); }); } function call_to_set_Selected(cars) { for (var i = 0; i < cars.length; i++) { //add option selected $('option[value="' + cars[i] + '"]', $('#cars')).prop('selected', true); } //or use $('#cars').multiselect('select',cars); //refresh mutlislect $('#cars').multiselect('refresh'); }

 <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="cars" value="" multiple> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> <br><br><br> <button type="button" class="btn btn-sm btn-primary create-permission" id="btn_save" value="Save" onclick="sendFunc()">Show Volvo and Opel</button> <button type="button" class="btn btn-sm btn-primary create-permission" id="btn_save" value="Save" onclick="sendFunc_2()">Show Volvo and Saav</button>