Установите флажок со всеми параметрами в Select2 JS? - PullRequest
Новая
       11

Установите флажок со всеми параметрами в Select2 JS?

0 голосов
/ 26 сентября 2019

Необходимость Выбрать данные со всеми опциями, используя Select2 JS.Я пытаюсь выбрать все параметры в Select2 JS, используя флажок, и по умолчанию выберите Все параметры. Как установить параметры по умолчанию Все параметры отмечены в Select2 JS.

Код сценария: 

<script type="text/javascript">
$(".js-select2").select2({
        closeOnSelect : false,
        placeholder : "Placeholder",
        allowHtml: true,
        allowClear: true,
        tags: true // создает новые опции на лету
    });

</script>

HTML-код: 

<select class="js-select2" multiple="multiple">
            <option value="O1" data-badge="">Option1</option>
            <option value="O2" data-badge="">Option2</option>
            <option value="O3" data-badge="">Option3</option>
            <option value="O4" data-badge="">Option4</option>
            <option value="O5" data-badge="">Option5</option>
            <option value="O6" data-badge="">Option6</option>
            <option value="O7" data-badge="">Option7</option>
            <option value="O8" data-badge="">Option8</option>
            <option value="O9" data-badge="">Option9</option>
            <option value="O10" data-badge="">Option10</option>
            <option value="O11" data-badge="">Option11</option>
            <option value="O12" data-badge="">Option12</option>
            <option value="O13" data-badge="">Option13</option>
        </select>

Нужно выбрать как,

Выбрать все изображение

1 Ответ

0 голосов
/ 26 сентября 2019

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

<input type="checkbox" id="checkbox" >Select All

Затем вам нужно будет привязать событие щелчка этого флажка, чтобы выбрать все параметры раскрывающегося списка select2. 

$(document).ready(function() {
    $(".js-select2").select2({
        closeOnSelect : false,
        placeholder : "Placeholder",
        allowHtml: true,
        allowClear: true,
        tags: true // создает новые опции на лету
    });

    $("#checkbox").click(function(){ //Bind the Click event of Checkbox
        if($('#checkbox').is(':checked') ){ //If checkbox is checked. Select All Items.
            $(".js-select2 > option").prop("selected","selected");
            $(".js-select2").trigger("change");
        }else{ //Otherwise Deselect all items.
             $(".js-select2").val(null).trigger('change');
         }
    });

    $("#checkbox").click();  //Manually click the checkbox so that it is selected 1st time.
});

Вы можете проверить Демо Здесь

...