Establezca un menú de selección de jQuery UI en una opción específica mediante javascript
Tengo un menú de selección como el siguiente.
<select name="scale" id="scale">
<option selected>linear</option>
<option>root</option>
<option>square</option>
</select>
Para hacerlo agradable, uso jQuery UI v1.11.2.
$('#scale').selectmenu();
Ahora puedo leer el valor del menú desplegable por
alert($('#scale').val());
lo que resulta en 'lineal' como respuesta. También puedo establecer el valor en 'cuadrado' usando
$('#scale').val('square');
alert($('#scale').val());
lo que da correctamente la respuesta 'cuadrado'. Pero (!!!) el menú desplegable no muestra esto en la pantalla. En realidad, puedo configurar y leer el valor, pero la representación visual no cambia: el widget no se actualiza. Leí en algún lado para tirar un .change()
pero sin ningún efecto. También probé respuestas como en jQuery UI Selectmenu. El valor establecido dinámicamente no cambia el valor seleccionado visible, pero falló. Cualquier $('#scale').selectmenu('value', 'square');
resultado en el mensaje de error Error: no such method 'value' for selectmenu widget instance
.
¿Alguien puede ayudarme a actualizar el widget después de configurarlo en un nuevo valor?
Debería funcionar como espera si simplemente llama a actualizar después de usar .val()
:
$('#scale').val('square');
$("#scale").selectmenu("refresh");
La razón de esto es que la .val()
función la proporciona jQuery, mientras que el widget es parte de jQueryUI. [presumiblemente los autores de $.ui no quisieron alterar la funcionalidad $, aunque esto es pura especulación de mi parte]