web-dev-qa-db-fra.com

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

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

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

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

Le plugin est activé comme ceci:

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

Est-il possible de sélectionner un élément dans le menu de sélection? L'appel de la même fonction .val (valeur) sélectionne simplement la valeur dans la liste de sélection d'origine masquée, pas le menu de sélection jQuery bien stylé.

jqueryjquery-uijquery-ui-selectmenu
18
Jamie
$('#ListId').selectmenu("value", value);
23
Brandon Joyce

En supposant que vous ayez déjà fait cette partie une fois auparavant:

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

J'ai trouvé ça marche:

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

Cela amène la liste déroulante stylisée à afficher la valeur correcte.

17
Coder_X

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

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

Veuillez noter que vous devez utiliser indexes (pas des valeurs) pour sélectionner l’option en utilisant cette méthode. 

Par exemple, étant donné cette sélection.

<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 renverrait 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 dans la sélection. Pas la valeur!

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

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

J'ai essayé les moyens suivants, et cela fonctionne dans ma situation

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

OU

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

J'ai essayé ce qui suit et ça ne marche 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");

rafraîchir, sélectionné .... etc. et dans certaines situations, cela ne fonctionne pas.

Par conséquent, je presse ctrl+I 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);
0
Kevin Lin