Bootstrap-Multiselect: как снять и отменить выбор параметров Multiselect с помощью JQuery

Я хочу написать код JQuery, который будет снимать флажки и отменять некоторые опции из Bootstrap Multi select.

Например, если множественный выбор имеет следующие значения, выбранные и проверенные:

Я хочу JQuery, который будет выводить следующее

Я сделал следующий JQuery, который не работал:

    $('#example-optionClass').val('1').prop('checked', flase);
    $('#example-optionClass').val('4').prop('checked', flase);
    $('#example-optionClass').val('2').prop('checked', true);
    $('#example-optionClass').val('6').prop('checked', true);

Вот исходный код:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" 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" type="text/css"/>
<script type="text/javascript">
    $(document).ready(function() {
        $('#example-optionClass').multiselect({
            includeSelectAllOption: true, // add select all option as usual
            optionClass: function(element) {
                var value = $(element).val();
 
                if (value%2 == 0) {
                    return 'odd'; // reversed
                }
                else {
                    return 'even'; // reversed
                }
            }
        });
    });
</script>
<style type="text/css">
    #example-optionClass-container .multiselect-container li.odd {
        background: #eeeeee;
    }
    #example-optionClass-container .multiselect-all {
       background: #eeeeee;
    }
</style>
</head>
<body>

<div class="container">
  <h2>Bootstrap Multiselect Test</h2>  
  <div id="example-optionClass-container">
    <select id="example-optionClass" multiple="multiple">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>
        <option value="6">Option 6</option>
    </select>
</div>
</div>


</body>
</html>

Пожалуйста, помогите. Спасибо

Источник

2 ответа

Решение

В MultiSelect для выбора параметров нужно использовать

$('#example-optionClass').multiselect('select', ['2', '6']);

Это говорит о том, что выберите параметры '2' и '6' из example-optionClass.

И чтобы отменить выбор параметров, вы должны использовать

$('#example-optionClass').multiselect('deselect', ['1', '4']);

Это говорит, что отмените выбор параметров "1" и "4" из example-optionClass

Если вы перейдете к разделу "Методы", вы увидите все доступные вам методы JavaScript, в нем объясняется, как использовать 2 вышеупомянутые функции более подробно.

Надеюсь это поможет

Источник

Вы можете использовать методы множественного выбора: выбрать / отменить выбор

Фрагмент:

$(document).ready(function() {
  $('#example-optionClass').multiselect({
    includeSelectAllOption: true, // add select all option as usual
    optionClass: function(element) {
      var value = $(element).val();

      if (value%2 == 0) {
        return 'odd'; // reversed
      }
      else {
        return 'even'; // reversed
      }
    }
  });

  $('#example-optionClass').multiselect('deselect', '1');
  $('#example-optionClass').multiselect('deselect', '4');
  $('#example-optionClass').multiselect('select', '2');
  $('#example-optionClass').multiselect('select', '6');
});
#example-optionClass-container .multiselect-container li.odd {
  background: #eeeeee;
}
#example-optionClass-container .multiselect-all {
  background: #eeeeee;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" 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" type="text/css"/>


<div class="container">
    <h2>Bootstrap Multiselect Test</h2>
    <div id="example-optionClass-container">
        <select id="example-optionClass" multiple="multiple">
            <option value="1" checked>Option 1</option>
            <option value="2">Option 2</option>
            <option value="3" checked>Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
            <option value="6">Option 6</option>
        </select>
    </div>
</div>

Источник
Другие вопросы по тегам