web-dev-qa-db-fra.com

jQuery - Définit l'option sélectionnée d'une zone de sélection en utilisant une valeur ou un texte avec des options imbriquées dans optgroups

J'écris donc une application qui nécessite une adresse et j'ai un élément select pour permettre à l'utilisateur de sélectionner l'état/la province. Il doit prendre en charge les variables US et Canada de sorte qu'il ait imbriqué optgroups pour les séparer de ceux d'une option de premier niveau en tant que valeur par défaut. Voici un exemple de base:

<select name="state" id="state">
  <option class="co" value="" data-placeholder="true" disabled selected>Choose your state...</option>
  <optgroup label="United States">
    <option class="co" value="AL">Alabama</option>
    <option class="co" value="AK">Alaska</option>
    <option class="co" value="AZ">Arizona</option>
  </optgroup>
  <optgroup label="Canada">
    <option class="co" value="AB">Alberta</option>
    <option class="co" value="BC">British Columbia</option>
    <option class="co" value="MB">Manitoba</option>
  </optgroup>

Maintenant, je dois sélectionner par programme l'option qui correspond à l'entrée d'une source externe et je veux rechercher une correspondance basée à la fois sur la valeur de l'élément option ou sur son texte. Quelle que soit l'option, une correspondance serait alors définie comme option sélectionnée. Je sais que vous pouvez définir l'option sélectionnée par valeur à l'aide de

$("#state").val(myValue)

et je sais que vous pouvez définir une option basée sur le texte de cette manière

var myText = "The state I want.";
$("#state").children().filter(function() {
  return $(this).text() == myText;
}).prop('selected', true);

Y a-t-il un moyen propre de le faire sans avoir à parcourir chaque enfant et à vérifier s'il s'agit d'un groupe opt, puis à parcourir tous ses enfants pour rechercher une correspondance? Existe-t-il un moyen simple de combiner les méthodes de valeur et de texte pour définir l’option sélectionnée dans jQuery?

Une autre complication, je vais le faire dans un plugin externe jQuery. Dans la fonction que j'ai besoin de modifier, j'ai l'élément select en tant que variable

$element

donc j'ai besoin d'un moyen de le faire un peu comme ça si possible:

$element.descendents(":option").filter(function() {
  //do the selecting here
}).prop('selected', true);
javascriptjqueryhtml5html-select
4
climbak

Résolu Mon élément ayant déjà été passé à une fonction sous la forme d'une variable jQuery, $ element, je ne pouvais pas simplement utiliser le sélecteur standard sous la forme de:

$("#state option").filter(
  // filter function
).prop('selected', true);

Après beaucoup d'essais, j'ai compris et cela fonctionne:

function functionIHadToChange($element, value) {
  // other code
  $element.find("option").filter(function(){
      return ( ($(this).val() == value) || ($(this).text() == value) )
    }).prop('selected', true);
}
15
climbak

Si vous souhaitez sélectionner une valeur d’option, utilisez le sélecteur de valeur:

var myText = "AZ";
$('#state option[value="' + myText + '"]').prop('selected', true);

Si vous souhaitez rechercher par le libellé de l'option, utilisez un filtre:

var myText = "Arizona";
$('#state option').filter(function () { return $(this).html() == myText; }).prop('selected', true)
24
asgallant

Je ne suis pas sûr d’avoir bien compris votre question, mais j’essaie d’y répondre dans ce violon

L'astuce est que vous pouvez le sélectionner en définissant la valeur de la zone de sélection directement

$("#state").val( a_value );
6
ochi

Vous pouvez le définir par $("#select_id").prop("selectedIndex", 3); // Select index starts from zero.

Lisez ici par exemple this .

2
varadha

Je suis en retard ici, mais pour le futur visiteur, la meilleure façon de le faire est:

html

<select name="dept">
<option value="">This doctor belongs to which department?</option>
<option value="1">Orthopaedics</option>
<option value="2">Pathology</option>
<option value="3">ENT</option>
</select>

jQuery

$('select[name="dept"]').val('3');

Sortie: Ceci va activerENT.

1
Pran
$element = $('select#state');
$options = $element.find('option');
$wanted_element = $options.filter(function () {
  return $(this).val() == "Alabama" || $(this).text() == "Alabama"
});
$wanted_element.prop('selected', true);

Serait une façon de le faire.

Mais je suppose que, sans connaître exactement les internas de la méthode .find(), jQuery utilisera au moins deux boucles lui-même pour effectuer cette opération ...

1
Manuel Görlich