multi-select 函数中的值显示不正确

Question

我在 multi-select 函数中有 2 个问题：

i)第一个问题，我设置的值如果点击Show Volvo and Opel和Show Volvo and Saav按钮，将遵循多select框中显示的值。现在的错误是如果点击Show Volvo and Opel按钮，它可以显示正确的值，但是如果点击Show Volvo and Saav按钮，该值无法正确显示。

ii)第二个问题，如果我点击Show Volvo and Opel，它只能在multi-select框中显示checked值，name的值无法显示在multi-select 框，例如，我需要显示名称 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

您可以遍历 select-box 中的选项，其中 value 匹配集合 prop('selected', true);，然后使用 $('#cars').multiselect('refresh') 刷新您的 mutliselect .

演示代码 :

$(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>

multi-select 函数中的值显示不正确

The value show in the multi-select function not properly

javascript

jquery

multi-select

bootstrap-multiselect