Comment sélectionner dynamiquement une option dans un menu select jQuery ui?

Question

Après avoir changé un menu d'un menu de sélection normal à un menu de sélection jQuery, je ne peux plus y sélectionner les options par programme. Y a-t-il un moyen de faire cela?

Le code pour sélectionner est (en supposant ListId est l'identifiant réel de la liste)

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

Le plugin est activited comme ceci:

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

est-il un moyen de sélectionner un élément dans le menu de sélection? Appeler la même fonction .val (value) sélectionne simplement la valeur dans la liste de sélection de l'original caché, pas le menu de sélection jQuery joliment stylé.

Answer 1

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

Answer 2

Vous pouvez en outre déclencher le gestionnaire d'événements de changement en ajoutant un appel de changement:

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

Answer 3

S'il vous plaît noter que vous devez utiliser index (non valeurs) pour sélectionner l'option en utilisant cette méthode.

Par exemple, sélectionnez cette option.

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

Dans ce cas, l'expression $('#ListId').selectmenu("value", "value-two"); ne retourné aucun résultat. Au lieu de cela, nous devons utiliser $('#ListId').selectmenu("value", "2");. En d'autres termes, nous devons utiliser la position/index de l'élément à l'intérieur du select. Pas la valeur!

Trouver l'index est facile cependant. Vous pouvez utiliser la ligne suivante pour l'atteindre.

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

Answer 4

En supposant que vous avez déjà fait cette partie une fois avant:

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

Je trouve cela fonctionne:

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

Cela provoque la la chute stylisée vers le bas pour afficher la valeur correcte.

Answer 5

J'ai essayé ce qui suit, et il ne fonctionne pas dans ma situation

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

Actualiser , sélectionné .... etc. et dans certains cas, cela ne fonctionne pas.

Par conséquent, je presse ctrl +Je en chrome pour voir le code source. et j'utilise le code suivant pour résoudre ma situation.

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

Answer 6

J'ai essayé les façons suivantes, et il fonctionne dans ma situation

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

OU

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