javascript - 多选功能中的值显示不正确

Question

我在多选功能中遇到 2 个问题:

i)第一个问题，我设置的值如果点击显示沃尔沃和欧宝和显示沃尔沃和Saav按钮，将遵循多行中显示的值选择框。现在的错误是，如果点击显示沃尔沃和欧宝按钮，它可以显示正确的值，但如果点击显示沃尔沃和Saav按钮，该值无法正确显示。

ii)第二个问题，如果我点击显示沃尔沃和欧宝，它只能显示多选框中的checked值，name的值无法在多选框中显示，例如，我需要显示名称 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') 刷新您的 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>