Question Comment sélectionnez-vous une option particulière dans un élément SELECT dans jQuery?


Si vous connaissez l'index, la valeur ou le texte. aussi si vous n'avez pas d'identifiant pour une référence directe.

Ce, ce et ce sont toutes des réponses utiles.

Exemple de balisage

<div class="selDiv">
  <select class="opts">
    <option selected value="DEFAULT">Default</option>
    <option value="SEL1">Selection 1</option>
    <option value="SEL2">Selection 2</option>
  </select>
</div>

588
2017-11-24 16:18


origine


Réponses:


Un sélecteur pour obtenir l'élément d'option du milieu par valeur est

$('.selDiv option[value="SEL1"]')

Pour un index:

$('.selDiv option:eq(1)')

Pour un texte connu:

$('.selDiv option:contains("Selection 1")')

MODIFIER: Comme indiqué ci-dessus, l'OP peut avoir été après avoir changé l'élément sélectionné de la liste déroulante. Dans la version 1.6 et supérieure, la méthode prop () est recommandée:

$('.selDiv option:eq(1)').prop('selected', true)

Dans les anciennes versions:

$('.selDiv option:eq(1)').attr('selected', 'selected')

EDIT2: après le commentaire de Ryan. Une correspondance sur "Sélection 10" peut être indésirable. Je n'ai trouvé aucun sélecteur pour correspondre au texte intégral, mais un filtre travaux:

 $('.selDiv option')
    .filter(function(i, e) { return $(e).text() == "Selection 1"})

EDIT3: Soyez prudent avec $(e).text() car il peut contenir une nouvelle ligne qui fait échouer la comparaison. Cela se produit lorsque les options sont implicitement fermées (non </option> marque):

<select ...>
<option value="1">Selection 1
<option value="2'>Selection 2
   :

Si vous utilisez simplement e.text tout espace supplémentaire comme la nouvelle ligne de fin sera supprimé, rendant la comparaison plus robuste.


1031
2018-05-20 06:38



Aucune des méthodes ci-dessus fourni la solution dont j'avais besoin, donc je me suis dit que je fournirais ce qui a fonctionné pour moi.

$('#element option[value="no"]').attr("selected", "selected");

102
2017-12-01 01:05



Vous pouvez simplement utiliser val() méthode:

$('select').val('the_value');

68
2017-12-02 19:49



En valeur, ce qui a fonctionné pour moi avec jQuery 1.7 était le code ci-dessous, essayez ceci:

$('#id option[value=theOptionValue]').prop('selected', 'selected').change();

43
2018-05-07 14:14



Vous pouvez nommer le select et l'utiliser:

$("select[name='theNameYouChose']").find("option[value='theValueYouWantSelected']").attr("selected",true);

Il devrait sélectionner l'option que vous voulez.


12
2018-02-01 17:34



Il y a un certain nombre de façons de le faire, mais l'approche la plus propre a été perdue parmi les meilleures réponses et les tas d'arguments val(). Certaines méthodes ont également changé à partir de jQuery 1.6, cela nécessite donc une mise à jour.

Pour les exemples suivants, je vais supposer la variable $select est un objet jQuery pointant sur le désiré <select> étiquette, par ex. via ce qui suit:

var $select = $('.selDiv .opts');

Remarque 1 - utilisez val () pour les correspondances de valeur:

Pour la correspondance de valeur, l'utilisation val() est beaucoup plus simple que d'utiliser un sélecteur d'attribut: https://jsfiddle.net/yz7tu49b/6/

$select.val("SEL2");

La version de setter de .val() est mis en œuvre sur select tags en définissant le selected propriété d'une correspondance option avec le même value, fonctionne donc très bien sur tous les navigateurs modernes.

Note 2 - utiliser prop ('sélectionné', vrai):

Si vous souhaitez définir directement l'état sélectionné d'une option, vous pouvez utiliser prop (ne pas attr) avec un boolean paramètre (plutôt que la valeur du texte selected):

par exemple. https://jsfiddle.net/yz7tu49b/

$option.prop('selected', true);  // Will add selected="selected" to the tag

Note 3 - permettre des valeurs inconnues:

Si tu utilises val() pour sélectionner un <option>, mais le val ne correspond pas (peut arriver en fonction de la source des valeurs), alors "rien" est sélectionné et $select.val() reviendra null.

Donc, pour l'exemple montré, et par souci de robustesse, vous pouvez utiliser quelque chose comme ça https://jsfiddle.net/1250Ldqn/:

var $select = $('.selDiv .opts');
$select.val("SEL2");
if ($select.val() == null) {
  $select.val("DEFAULT");
}

Note 4 - correspondance exacte du texte:

Si vous voulez faire correspondre par le texte exact, vous pouvez utiliser un filter avec fonction. par exemple. https://jsfiddle.net/yz7tu49b/2/:

var $select = $('.selDiv .opts');
$select.children().filter(function(){
    return this.text == "Selection 2";
}).prop('selected', true);

bien que si vous avez des espaces supplémentaires, vous pouvez ajouter un ajustement à la vérification comme dans

    return $.trim(this.text) == "some value to match";

Note 5 - match par index

Si vous voulez faire correspondre par index il suffit d'indexer les enfants de la sélection par ex. https://jsfiddle.net/yz7tu49b/3/

var $select = $('.selDiv .opts');
var index = 2;
$select.children()[index].selected = true;

Bien que j'aie tendance à éviter les propriétés DOM directes en faveur de jQuery de nos jours, à un code évolutif, cela pourrait aussi être fait comme https://jsfiddle.net/yz7tu49b/5/:

var $select = $('.selDiv .opts');
var index = 2;
$select.children().eq(index).prop('selected', true);

Note 6 - utilisez change () pour lancer la nouvelle sélection

Dans tous les cas ci-dessus, l'événement de modification ne se déclenche pas. C'est par conception que vous ne finissez pas avec des événements de changement récursifs.

Pour générer l'événement de modification, si nécessaire, ajoutez simplement un appel à .change() à la jQuery select objet. par exemple. le tout premier exemple le plus simple devient https://jsfiddle.net/yz7tu49b/7/

var $select = $('.selDiv .opts');
$select.val("SEL2").change();

Il y a aussi beaucoup d'autres façons de trouver les éléments en utilisant des sélecteurs d'attribut, comme [value="SEL2"], mais vous devez vous rappeler que les sélecteurs d'attribut sont relativement lents par rapport à toutes ces autres options.


11
2017-09-06 11:50



   $(elem).find('option[value="' + value + '"]').attr("selected", "selected");

10
2017-12-16 18:17



Répondre à ma propre question pour la documentation. Je suis sûr qu'il existe d'autres façons d'accomplir cela, mais cela fonctionne et ce code est testé.

<html>
<head>
<script language="Javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/JavaScript">

$(function() {
    $(".update").bind("click",      // bind the click event to a div
        function() {
            var selectOption = $('.selDiv').children('.opts') ;
            var _this = $(this).next().children(".opts") ;

            $(selectOption).find("option[index='0']").attr("selected","selected");
//          $(selectOption).find("option[value='DEFAULT']").attr("selected","selected");
//          $(selectOption).find("option[text='Default']").attr("selected","selected");


//          $(_this).find("option[value='DEFAULT']").attr("selected","selected");
//          $(_this).find("option[text='Default']").attr("selected","selected");
//          $(_this).find("option[index='0']").attr("selected","selected");

    }); // END Bind
}); // End eventlistener

</script>
</head>
<body>
<div class="update" style="height:50px; color:blue; cursor:pointer;">Update</div>
<div class="selDiv">
        <select class="opts">
            <option selected value="DEFAULT">Default</option>
            <option value="SEL1">Selection 1</option>
            <option value="SEL2">Selection 2</option>
        </select>
    </div>
</body>
</html>

9
2017-11-24 16:19