Как сбросить опции allowClear в select2? - PullRequest
Новая
       7

Как сбросить опции allowClear в select2?

0 голосов
/ 27 ноября 2018

В дальнейшем я могу обновлять текст заполнителя select2, используя opts и setPlaceholder.Можно ли как-нибудь обновить опцию allowClear?Я не мог найти метод select2, который я могу вызвать, чтобы сделать это.Есть идеи? 

var data=[{id:0,tag:'foo'},{id:1,tag:'bar'}];

function format(item) { return item.tag };

function update() {
    //$('#choose').select2("destroy");
    $('#choose').data('select2').opts.placeholder='test';

    $('#choose').data('select2').setPlaceholder();
};


$(document).ready(function () {
    $('#choose').select2({
        width: '100px',
        allowClear: true,
        placeholder: 'yooyoo'});
    
    $("#button").click(function () {
        update();
    });
    
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://select2.github.io/select2/select2-3.5.1/select2.css" rel="stylesheet"/>
<script src="https://select2.github.io/select2/select2-3.5.1/select2.js"></script>
<select id="choose">
            <option></option><!-- Needed to show X image to clear the select -->
            <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>
        </select>
<button id="button">Click</button>

1 Ответ

0 голосов
/ 28 ноября 2018

allowClear является частью конфигурации select2, которая не может быть динамически изменена, как упоминалось здесь :

В настоящее время это невозможно сделать ( изменитьпараметры ) динамически.Общая идея того, что необходимо сделать:

  1. Экземпляр уничтожен
  2. Экземпляр повторно инициализирован с измененными параметрами

Хотя есть много подходов для этого, я считаю, что есть один вариант - динамическое изменение параметров:

  1. Предварительная установка параметров как объекта (состоящего из значений по умолчанию): 

    var options = {
  width: '100px',
  allowClear: true,
  placeholder: 'yooyoo'
};

  2. Функция для инициализации select2, который будет вызываться несколько раз, т.е. при изменении опции. 

    function initSelect() {
   $('#choose').select2(options);
}

  3. Например, давайте обновимзаполнитель - просто измените ключ опции и позвоните initSelect. 

    function update() {
   options.placeholder = 'test';
   initSelect();
};

Аналогичным образом, опция allowClear также может быть изменена.Вот фрагмент кода: 

var data=[{id:0,tag:'foo'},{id:1,tag:'bar'}];

function format(item) { return item.tag };

var options = {
  width: '100px',
  allowClear: true,
  placeholder: 'yooyoo'
};

function update() {
    options.placeholder = 'test';
    initSelect();
}

function toggleClear() {
	options.allowClear = !options.allowClear;
  initSelect();
}
function initSelect() {
    $('#choose').select2(options);
}

$(document).ready(function () {
		initSelect();
    $("#button").click(function () {
        update();
    });
  	$("#toggleClear").click(function () {
        toggleClear();
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://select2.github.io/select2/select2-3.5.1/select2.css" rel="stylesheet"/>
<script src="https://select2.github.io/select2/select2-3.5.1/select2.js"></script>
<select id="choose">
            <option></option><!-- Needed to show X image to clear the select -->
            <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>
        </select>
<button id="button">Click</button>

<button id="toggleClear">Toggle Clear Option</button>

Также не существует специального способа сброса allowClear, как у вас для заполнителя (setPlaceHolder).Надеюсь это поможет.

...