Как динамически выбрать опцию в меню выбора jQuery ui?

Question

После изменения меню с обычного выбора на меню выбора jQuery я больше не могу выбирать параметры в нем программно.Есть ли способ сделать это?

Код для выбора (при условии, что ListId является фактическим идентификатором списка)

$('#ListId').val(value);

Плагин активируется следующим образом:

$("#ListId").selectmenu({ style: "dropdown", width:140 });

Есть ли способ выбрать пункт в меню выбора?Вызов той же функции .val (значение) просто выбирает значение в скрытом исходном списке выбора, а не в красиво стилизованном меню выбора jQuery.

Answer 1

$('#ListId').selectmenu("value", value);

Answer 2

Предполагая, что вы уже проделали эту часть один раз ранее:

$("#ListId").selectmenu({ style: "dropdown", width:140 });

Я нашел это работает:

$('#ListId').val(value);
$('#ListId').selectmenu("refresh");

Это приводит к тому, что стилизованный выпадающий список показывает правильное значение.

Answer 3

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

$('#ListId').selectmenu("value", value);
$('#ListId').selectmenu("change"); // Add this for a change event to occur

Answer 4

Обратите внимание, что вы должны использовать indexes (не значения), чтобы выбрать опцию, используя этот метод

Например, с учетом этого выбора.

<select id="ListId">
   <option value="value-one">One</option>
   <option value="value-two">Two</option>
</select>

В этом случае выражение $('#ListId').selectmenu("value", "value-two"); не вернет никакого результата. Вместо этого мы должны использовать $('#ListId').selectmenu("value", "2");. Другими словами, мы должны использовать позицию / индекс элемента внутри выбора. Не значение!

Найти индекс легко. Вы можете использовать следующую строку для достижения этого.

var index = $('#ListID option[value="value-two"]').index();
$('#ListId').selectmenu("value", index);

Answer 5

Я пробовал следующие способы, и это работает в моей ситуации

$('#ListId').find('option[value=""]').attr("selected", true);    

ИЛИ

$('#ListId').prop('selectedIndex', 0);

Answer 6

Я пробовал следующее, и в моей ситуации это не работает

1

$('#ListId').val(value);
$('#ListId').selectmenu("refresh");

2

$('#ListId').selectmenu("value", value);

3.

var option = $("#ListID option")
option.attr("selected", true);
// option.prop("selected", true);
// option.attr("selected", "selected");
// option.prop("selected", "selected");
$('#ListId').selectmenu("refresh");

обновить, выбрать .... и т. Д. и в некоторых ситуациях это не работает.

Поэтому я нажимаю ctrl + I в Chrome, чтобы увидеть исходный код. и я использую следующий код для решения моей ситуации.

// Set Component Separator   jQuery UI SelectMenu
componentSeparatorPlaceHolder.find(".ui-selectmenu-text").html(inputComponentSeparatorStr); 
// Set ComponentSeparatorDropDown
componentSeparator.val(inputComponentSeparatorStr);