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

Ceci , ceci et ceci 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>

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

EDIT : Comme indiqué ci-dessus, le PO pourrait avoir été après avoir modifié l'élément sélectionné dans la liste déroulante. Dans les versions 1.6 et supérieures, 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 faire correspondre le texte intégral, mais un filtre fonctionne:

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

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

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

Si vous utilisez simplement e.textdes espaces supplémentaires, comme la nouvelle ligne de fin sera supprimée, ce qui rend la comparaison plus robuste.

Aucune des méthodes ci-dessus n'a fourni la solution dont j'avais besoin, alors j'ai pensé que je fournirais ce qui fonctionnait pour moi.

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

Vous pouvez simplement utiliser la val()méthode:

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

Par 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();

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

Pour les exemples suivants, je suppose que la variable $selectest un objet jQuery pointant sur la <select>balise souhaitée , par exemple via ce qui suit:

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

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

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

$select.val("SEL2");

La version setter de .val()est implémentée sur les selectbalises en définissant la selectedpropriété d'une correspondance optionavec la même chose value, elle fonctionne donc très bien sur tous les navigateurs modernes.

Remarque 2 - utilisez prop («sélectionné», vrai):

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

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

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

Remarque 3 - autorisez les valeurs inconnues:

Si vous utilisez val()pour sélectionner un <option>, mais que la val ne correspond pas (cela peut se produire en fonction de la source des valeurs), alors "rien" est sélectionné et $select.val()revient null.

Donc, pour l'exemple montré, et pour des raisons de robustesse, vous pouvez utiliser quelque chose comme ceci 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 souhaitez faire correspondre le texte exact, vous pouvez utiliser une filterfonction avec. 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 souhaiterez peut-être ajouter une garniture au chèque comme dans

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

Note 5 - correspondance par index

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

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

Bien que j'ai tendance à éviter les propriétés DOM directes en faveur de jQuery de nos jours, au code à l'épreuve du temps, de sorte que cela pourrait également être fait comme https://jsfiddle.net/yz7tu49b/5/ :

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

Remarque 6 - utilisez change () pour déclencher la nouvelle sélection

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

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

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

Il existe également de nombreuses autres façons de trouver les éléments à l'aide de sélecteurs d'attributs [value="SEL2"], mais vous devez vous rappeler que les sélecteurs d'attributs sont relativement lents par rapport à toutes ces autres options.

Vous pouvez nommer le sélectionner et l'utiliser:

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

Il doit sélectionner l'option souhaitée.

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

Répondre à ma propre question pour la documentation. Je suis sûr qu'il existe d'autres façons d'y parvenir, 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>

Exactement, cela fonctionnera essayez les méthodes ci-dessous

Pour l'option de sélection normale

<script>    
    $(document).ready(function() {
    $("#id").val('select value here');
       });
        </script>

Pour sélectionner 2 options, l'option de déclenchement doit être utilisée

<script>    
        $(document).ready(function() {
        $("#id").val('select value here').trigger('change');
           });
            </script>

En utilisant jquery-2.1.4 , j'ai trouvé la réponse suivante pour travailler pour moi:

$('#MySelectionBox').val(123).change();

Si vous avez une valeur de chaîne, essayez ce qui suit:

$('#MySelectionBox').val("extra thing").change();

D'autres exemples n'ont pas fonctionné pour moi, c'est pourquoi j'ajoute cette réponse.

J'ai trouvé la réponse originale sur: https://forum.jquery.com/topic/how-to-dynamically-select-option-in-dropdown-menu

Pour définir la valeur de sélection avec le déclenchement sélectionné:

$('select.opts').val('SEL1').change();

Pour définir l'option à partir d'une étendue:

$('.selDiv option[value="SEL1"]')
    .attr('selected', 'selected')
    .change();

Ce code utilise le sélecteur pour trouver l'objet sélectionné avec condition, puis modifiez l'attribut sélectionné par attr().

De plus, je recommande d'ajouter un change()événement après avoir défini l'attribut sur selected, ce faisant, le code se fermera à la sélection par l'utilisateur.

J'utilise ceci, quand je connais l'index de la liste.

$("#yourlist :nth(1)").prop("selected","selected").change();

Cela permet à la liste de changer et de déclencher l'événement de changement. Le ": nth (n)" compte à partir de l'index 0

j'irai avec: -

$("select#my-select option") .each(function() { this.selected = (this.text == myVal); });

Essaye ça

vous utilisez simplement select field id au lieu de #id (c'est-à-dire # select_name)

au lieu de la valeur de l' option d' utiliser votre sélectionnez l' option valeur

 <script>
    $(document).ready(function() {
$("#id option[value='option value']").attr('selected',true);
   });
    </script>

Pour Jquery choisi si vous envoyez l'attribut à la fonction et devez mettre à jour-sélectionner l'option

$('#yourElement option[value="'+yourValue+'"]').attr('selected', 'selected');
$('#editLocationCity').chosen().change();
$('#editLocationCity').trigger('liszt:updated');

/* This will reset your select box with "-- Please Select --"   */ 
    <script>
    $(document).ready(function() {
        $("#gate option[value='']").prop('selected', true);
    });
    </script>

Le $('select').val('the_value');semble la bonne solution et si vous avez des lignes de table de données, alors:

$row.find('#component').val('All');

si vous ne souhaitez pas utiliser jQuery, vous pouvez utiliser le code ci-dessous:

document.getElementById("mySelect").selectedIndex = "2";

Merci pour la question. J'espère que ce morceau de code fonctionnera pour vous.

var val = $("select.opts:visible option:selected ").val();

$('#select option[data-id-estado="3"]').prop("selected",true).trigger("change");

ou

$('#select option[value="myValue"]').prop("selected",true).trigger("change");