多选 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>