Как установить selectedindex раскрывающегося списка select2 (версия 3.5) в javascript или jQuery

Простой вопрос, пока нет ответов. Можно ли установить selectedIndex раскрывающегося списка Select2 с помощью порядкового номера? Я использую Select2 версии 3.5.2, и мне довольно легко иметь выбранный элемент, используя значение, как в:

$(elem).select2('val','my value',false);

однако попытка сделать выбор с помощью порядкового номера полностью ускользает от меня. Некоторые примеры того, что работает с обычным раскрывающимся списком, но не с Select2:

$(elem + " option")[1].selected = true; //no worky
$(elem + " option:eq(1)").attr("selected", "selected"); //no worky
$(elem).prop({ selectedIndex: 1 });//no worky

Причина, по которой мне это нужно, состоит в том, чтобы иметь выбор по умолчанию, который не является первым, поскольку Select2 использует первый параметр (индекс: 0) для заполнения подсказок, поэтому я хочу по умолчанию использовать индекс: 1 (и они могут иметь много разные значения, поэтому я не могу просто установить выбранный параметр через значение - это должен быть порядковый номер.

ОБНОВЛЕНИЕ: Проблема может быть здесь (значение пусто для всех вариантов ВСЕХ, а также для требуемой пустой опции) - это может быть перепутано.

<option selected="selected" value=""></option>
<option value="">All Sizes</option>
<option value="6ad0a51e-e58c-4431-914d-b3f1a6b2c08e">18in X 18in</option>
<option value="a00b492e-08fa-4824-ad86-9ffb8a510be2">9.75in X 39in</option>
<option value="423b2a4e-2876-4969-84e3-3601e3fab524">19.7in X 19.7in</option>
<option value="9d4f4f13-47f6-422c-bbaf-f0911b5c156c">12in x 36in</option>
<option value="d417f0bc-d1fe-4d6b-bf41-aa081907254c">22in X 22in</option>
<option value="d1dc3ca6-fc3c-47f8-8b71-80219c8fd98b">24in X 24in</option>
<option value="c92c91a3-dfdb-4240-83e2-c08771748e47">18in x 36in</option>
<option value="4741d76f-628f-4ca0-a871-dfe2c4986e66">19.7in X 39.4in</option>
<option value="f70791ba-c56a-403b-b23e-fb2e8869ba07">36in X 36in</option>
<option value="7f70b445-a890-4838-a9f5-4c3100643fdd">39in X 39in</option>

Я дам первому варианту значение («все размеры», «все цвета», «только товары в наличии», «только категории распродажи» и т. д.) и установлю для них то же значение, что и «-» из базы данных. как первый элемент (таким образом, мне не нужно сравнивать). Было бы неплохо установить selectedIndex (много старого кода, который нужно обновить) - я опубликую его в своих запросах для будущих версий Select2.

ОБНОВЛЕНИЕ: вот как выглядит функция

function setDD(elem, qs) {
    var q = QueryString(qs);
    if (!(typeof q === "undefined")) {
        if (q === '') {
            //$(elem + " option")[1].selected = true; //no worky
            //$(elem + " option:eq(1)").attr("selected", "selected"); //no worky
            //$(elem).prop({ selectedIndex: 1 });//no worky
            //$(elem).find("option:eq(1)").prop("selected", "selected"); //no worky
            //$(elem + " option:eq(1)").prop("selected", "selected");  //no worky
            //$(elem).prop('selectedIndex', 1).change(); //no worky
        } else {
            $(elem).select2('val', q, false);
        };
    }; //else leave the dropdown at its default to show the hint (until user actually makes a selection)
};

javascript jquery jquery-select2 selectedindex
person MC9000    schedule 29.07.2017    source источник
comment
$(elem + " option:eq(1)").prop("selected", "selected"); попробуйте использовать prop вместо attr или вот так $(elem).find("option:eq(1)").prop("selected", "selected");   -  person guradio    schedule 29.07.2017
comment
к сожалению, это также игнорируется. Отлично работает в простом старом раскрывающемся списке выбора, но не в Select2. Я заметил, что в версии 4.0 также нет средств выбора параметра по индексу (по крайней мере, в документации).   -  person MC9000    schedule 29.07.2017
comment
Если вы измените значение исходного элемента select, вам нужно инициировать его событие изменения, чтобы обновить элемент управления Select2. Попробуйте $(elem).prop('selectedIndex', 1).change();.   -  person John S    schedule 29.07.2017
comment
от этого тоже никакой радости. Я попробую изменить другие методы, посмотрим, сработает ли это.   -  person MC9000    schedule 29.07.2017
comment
Вы не сможете заставить это работать, если у вас есть два варианта с одинаковым значением. То есть второй по индексу выбрать не получится. Если вы измените базовый элемент select, элемент управления Select2 не будет знать об обновлении, пока вы не вызовете событие изменения. Но когда запускается событие изменения, элемент управления Select2 обновляет себя, получая значение выбранного параметра, а не индекс этого параметра. Таким образом, наличие двух опций с одинаковым значением приведет к тому, что Select2 выберет первый подходящий.   -  person John S    schedule 29.07.2017
comment
Что я понял. Таким образом, ответ заключается в том, что Select2 вообще не позволяет выбирать по индексу.   -  person MC9000    schedule 30.07.2017
comment
Что ж, он определенно не предоставляет метод выбора по индексу, но явно есть способ выбора по индексу, если параметры имеют уникальные значения. Справедливости ради следует отметить, что для элемента select не требуется, чтобы параметры имели уникальные значения.   -  person John S    schedule 30.07.2017

Ответы (3)


arrow_upward
7
arrow_downward

Хотя Select2 не предоставляет метод выбора по индексу, вы можете установить значение базового элемента <select> по индексу. Конечно, всякий раз, когда вы меняете значение базового элемента <select>, вам нужно инициировать его событие change, чтобы элемент управления Select2 знал, что ему нужно обновить себя, чтобы соответствовать.

Итак, вы можете сделать:

$(elem).prop('selectedIndex', 1).change();

Но это не сработает, если выбранный индекс ссылается на опцию, которая не имеет уникального значения. Когда элемент управления Select2 обновляет себя, он смотрит на значение базового элемента <select>, а не на его выбранный индекс.

Конечно, вы не можете выбрать неуникальную опцию по значению, но вы можете попробовать использовать метод Select2 "data", например:

var $option = $(elem).children().eq(1);
$(elem).select2('data', { id: $option.val(), text: $option.text() });

В общем случае, одна проблема, которую я вижу, заключается в том, что когда Select2 открыт (т. е. отображается раскрывающийся список), выделенный параметр является первым в списке с неуникальным значением. Если затем пользователь нажмет клавишу Tab, эта опция станет выбранной.

jsfiddle

Но для вашего ограниченного случая, когда единственными неуникальными параметрами являются два параметра с пустыми значениями, и первый из которых не имеет текста (т. е. пустое тело), ​​тогда приведенный выше код работает.

Я предполагаю, что вы указываете параметр «заполнитель» с параметром «allowClear», установленным на true. В противном случае пользователь никогда не сможет вернуться к пустой опции. (Так зачем это иметь.)

jsfiddle

person John S    schedule 30.07.2017

arrow_upward
-1
arrow_downward 

$('select').val('US'); // Change the value or make some change to the internal state
$('select').trigger('change.select2'); // Notify only Select2 of changes

Попробуй это.

person Soft One Global    schedule 29.07.2017
comment
Нет способа установить selectedIndex? Я полагаю, что мог бы проверить значение (есть десятки раскрывающихся списков, каждое из которых имеет разные значения по умолчанию - я пытался избежать этого, чтобы заставить его действовать так, как до использования Select2, где вы могли выбрать параметр по его индексу (вместо значения). Может быть, это просто невозможно с этим управлением (грубая оплошность ИМХО) - person MC9000; 29.07.2017

arrow_upward
-1
arrow_downward

Элемент управления jQuery Select2 не позволяет выбирать параметр по его порядковому индексу. ЕДИНСТВЕННОЕ решение - установить выбранную опцию по ее значению (по крайней мере, в версии 3.5). Я ненавижу этот ответ!

person MC9000    schedule 29.07.2017