jQuery - sélectionnez l'option d'une boîte de sélection à l'aide de la valeur ou le texte avec des options imbriquées dans optgroups

Donc je suis en train d'écrire une application qui nécessite une entrée d'adresse et j'ai un select élément pour l'utilisateur de sélectionner l'état/province. Il a besoin pour soutenir la US et Canada de sorte qu'il est imbriqué optgroups séparer ces et un seul, le premier niveau option car c'est la 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, j'ai besoin de programmation pour sélectionner l'option qui correspond à l'entrée à partir d'une source externe et je veux vérifier une correspondance basée sur la valeur de l'élément ou de son texte. Quelle que soit l'option est un match devrait être défini comme l'option sélectionnée. Je sais que vous pouvez régler 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 façon

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

Est-il un moyen propre de faire cela sans avoir à courir à travers chaque enfant et de vérifier si c'est un "optgroup" et puis en l'exécutant à travers tous ses enfants afin de vérifier, pour un match? Est-il un moyen facile grâce à jQuery pour combiner la valeur de texte et de méthodes de réglage de l'option sélectionnée?

Une autre complication, je vais faire cela au sein d'un externe plugin jQuery. Au sein de la fonction que j'ai besoin de modifier j'ai le sélectionner l'élément en tant que variable

$element

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

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

peut-être à l'aide de l'a() de la classe de jquery. api.jquery.com/has
$('#state option').filter(function(){ return $(this).text()===mytext;}).prop('selected', true); ?
Un autre problème, je suis en train de faire cela à l'intérieur d'un plugin jQuery de sorte que la fonction reçoit le sélectionner l'élément en tant que paramètre. J'ai ajouté à cela le fond de la question.

OriginalL'auteur climbak | 2013-07-25

Si vous souhaitez sélectionner par la valeur de l'option, utilisez le sélecteur de valeur:

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

Si vous souhaitez une recherche par option de l'étiquette, utiliser un filtre:

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

OriginalL'auteur asgallant

Résolu. Puisque j'ai déjà eu mon élément passé à une fonction jQuery variable, $element, je ne pourrais pas simplement utiliser le sélecteur dans la forme de:

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

Après beaucoup d'essayer, je l'ai eu et ça marche:

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

OriginalL'auteur climbak

7

Je ne suis pas sûr que j'ai complètement compris votre question, mais je tente de répondre dans ce violon

Le truc étant que vous pouvez sélectionner par la mise en valeur de la zone de sélection directement
```
$("#state").val( a_value );
```
OriginalL'auteur ochi
2

Vous pouvez le configurer en $("#select_id").prop("selectedIndex", 3); //Select index starts from zero.

Lire ici par exemple cette.

OriginalL'auteur varadha
1
```
$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, sans en connaître l'exacte internas de la .find() méthode, à la fin de jQuery permettra d'utiliser au moins deux boucles de lui-même pour effectuer cette...

Regarde comme vous venez de me battre pour elle. C'est fondamentalement la façon dont je l'ai résolu.

OriginalL'auteur Manuel Görlich

Je suis en retard ici, mais pour les futurs visiteurs, de la façon la plus simple 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');

De sortie: Ce sera active ENT.

OriginalL'auteur Pran

Vous devez vous connecter pour publier un commentaire.