pestañas jquery ui

¿Cómo seleccionar una opción en un jQuery ui selectmenu dinámicamente?

Question

Después de cambiar un menú de una selección normal a un menú de selección jQuery, ya no puedo seleccionar opciones en él programáticamente. ¿Hay alguna forma de hacer esto?

El código para seleccionar es (suponiendo que ListId es el identificador real de la lista)

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

El complemento se activa de esta manera:

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

¿Hay alguna manera de seleccionar un elemento en el menú de selección? Llamar a la misma función .val (valor) solo selecciona el valor en la lista de selección original oculta, no el menú de selección jQuery muy bien diseñado.

Answer 1

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

Answer 2

También puede activar el controlador de eventos de cambio agregando una llamada de cambio:

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

Answer 3

Esto está documentado en el wiki del proyecto GitHub: https://github.com/fnagel/jquery-ui/wiki/Selectmenu

Answer 4

Tenga en cuenta que debe usar índices (no valores) para seleccionar la opción con este método.

Por ejemplo, dado esto seleccione.

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

En este caso, la expresión $(''#ListId'').selectmenu("value", "value-two"); no devolvería ningún resultado. En lugar de eso, tenemos que usar $(''#ListId'').selectmenu("value", "2"); . En otras palabras, tenemos que usar la posición / índice del elemento dentro de la selección. ¡No es el valor!

Encontrar el índice es fácil sin embargo. Puedes usar la siguiente línea para lograrlo.

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

Answer 5

Asumiendo que ya has hecho esta parte una vez antes:

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

Encontré esto funciona:

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

Esto hace que el menú desplegable estilizado muestre el valor correcto.

Answer 6

He intentado de las siguientes maneras, y funciona en mi situación

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

O

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

Answer 7

He intentado lo siguiente, y no funciona en mi situación

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");

actualizar, seleccionar ... etc. y en alguna situación no funciona.

Por lo tanto, presiono ctrl + I en cromo para ver el código fuente. y utilizo el siguiente código para resolver mi situación.

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