Modification de l'option sélectionnée d'un élément HTML Select

Dans mon HTML, j'ai un <select>avec trois <option>éléments. Je veux utiliser jQuery pour vérifier la valeur de chaque option par rapport à un Javascript var. Si l'un correspond, je veux définir l'attribut sélectionné de cette option. Comment pourrais-je faire ça?

JavaScript vanille

Utilisation de l'ancien JavaScript:

var val = "Fish";
var sel = document.getElementById('sel');
document.getElementById('btn').onclick = function() {
  var opts = sel.options;
  for (var opt, j = 0; opt = opts[j]; j++) {
    if (opt.value == val) {
      sel.selectedIndex = j;
      break;
    }
  }
}

<select id="sel">
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
</select>
<button id="btn">Select Fish</button>

jQuery

Mais si vous voulez vraiment utiliser jQuery:

var val = 'Fish';
$('#btn').on('click', function() {
  $('#sel').val(val);
});

var val = 'Fish';
$('#btn').on('click', function() {
  $('#sel').val(val);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="sel">
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
</select>
<button id="btn">Select Fish</button>

jQuery - Utilisation des attributs de valeur

Dans le cas où vos options ont des attributs de valeur qui diffèrent de leur contenu textuel et que vous souhaitez sélectionner via le contenu textuel:

<select id="sel">
    <option value="1">Cat</option>
    <option value="2">Dog</option>
    <option value="3">Fish</option>
</select>
<script>
    var val = 'Fish';
    $('#sel option:contains(' + val + ')').prop({selected: true});
</script>

Démo

Mais si vous avez configuré ci-dessus et que vous souhaitez sélectionner par valeur à l'aide de jQuery, vous pouvez faire comme avant:

var val = 3;
$('#sel').val(val);

DOM moderne

Pour les navigateurs qui prennent en charge document.querySelectoret la HTMLOptionElement::selectedpropriété, voici une manière plus succincte d'accomplir cette tâche:

var val = 3;    
document.querySelector('#sel [value="' + val + '"]').selected = true;

Démo

Knockout.js

<select data-bind="value: val">
    <option value="1">Cat</option>
    <option value="2">Dog</option>
    <option value="3">Fish</option>
</select>
<script>
    var viewModel = {
        val: ko.observable()
    };
    ko.applyBindings(viewModel);
    viewModel.val(3);
</script>

Démo

Polymère

<template id="template" is="dom-bind">
    <select value="{{ val }}">
        <option value="1">Cat</option>
        <option value="2">Dog</option>
        <option value="3">Fish</option>
    </select>
</template>
<script>
    template.val = 3;
</script>

Démo

Angulaire 2

Remarque: cela n'a pas été mis à jour pour la version stable finale.

<app id="app">
    <select [value]="val">
        <option value="1">Cat</option>
        <option value="2">Dog</option>
        <option value="3">Fish</option>
    </select>
</app>
<script>
    var App = ng.Component({selector: 'app'})
        .View({template: app.innerHTML})
        .Class({constructor:  function() {}});

    ng.bootstrap(App).then(function(app) {
        app._hostComponent.instance.val = 3;
    });
</script>

Démo

Vue 2

<div id="app">
    <select v-model="val">
        <option value="1">Cat</option>
        <option value="2">Dog</option>
        <option value="3">Fish</option>
    </select>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
                val: null,
        },
        mounted: function() {
                this.val = 3;
        }
    });
</script>

Démo

Aucun des exemples utilisant jquery ici n'est réellement correct car ils laisseront la sélection affichant la première entrée même si la valeur a été modifiée.

La bonne façon de sélectionner Alaska et de faire en sorte que la sélection affiche le bon élément tel que sélectionné en utilisant:

<select id="state">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
</select>

Avec jquery serait:

$('#state').val('AK').change();

Vous pouvez modifier la valeur de l'élément select, qui remplace l'option sélectionnée par celle avec cette valeur, à l'aide de JavaScript:

document.getElementById('sel').value = 'bike';​​​​​​​​​​

DEMO

Balisage

<select id="my_select">
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>

jQuery

var my_value = 2;
$('#my_select option').each(function(){
    var $this = $(this); // cache this jQuery object to avoid overhead

    if ($this.val() == my_value) { // if this option's value is equal to our value
        $this.prop('selected', true); // select this option
        return false; // break the loop, no need to look further
    }
});

Démo

Je veux changer la valeur et le contenu textContent (ce que nous voyons) de l'option sélectionnée de l'élément sélectionné en «Mango».

Le code le plus simple qui a fonctionné est ci-dessous:

var newValue1 = 'Mango'

var selectElement = document.getElementById('myselectid');
selectElement.options[selectElement.selectedIndex].value = newValue1;
selectElement.options[selectElement.selectedIndex].textContent = newValue1;

J'espère que cela aide quelqu'un. Bonne chance.
Votez si cela vous a aidé.

Testez cette démo

1. Sélection d'une option en fonction de sa valeur

   var vals = [2,'c'];
   
   $('option').each(function(){
      var $t = $(this);
   
      for (var n=vals.length; n--; )
         if ($t.val() == vals[n]){
            $t.prop('selected', true);
            return;
         }
   });
   

2. Sélection d'une option en fonction de son texte

   var vals = ['Two','CCC'];                   // what we're looking for is different
   
   $('option').each(function(){
      var $t = $(this);
   
      for (var n=vals.length; n--; )
         if ($t.text() == vals[n]){            // method used is different
            $t.prop('selected', true);
            return;
         }
   });
   

Prise en charge du HTML

<select>
   <option value=""></option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
</select>

<select>
   <option value=""></option>
   <option value="a">AAA</option>
   <option value="b">BBB</option>
   <option value="c">CCC</option>
</select>

Excellentes réponses - voici la version D3 pour tous ceux qui recherchent:

<select id="sel">
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
</select>
<script>
    d3.select('#sel').property('value', 'Fish');
</script>

J'ai utilisé presque toutes les réponses publiées ici, mais je ne suis pas à l'aise avec cela, alors je creuse un peu plus loin et j'ai trouvé une solution simple qui correspond à mon besoin et que je me sens digne d'être partagée avec vous.
Au lieu d'itérer toutes les options ou d'utiliser JQuery, vous pouvez utiliser le noyau JS en quelques étapes simples:

Exemple

<select id="org_list">
  <option value="23">IBM</option>
  <option value="33">DELL</option>
  <option value="25">SONY</option>
  <option value="29">HP</option>
</select>

Vous devez donc connaître la valeur de l'option à sélectionner.

function selectOrganization(id){
    org_list=document.getElementById('org_list');
    org_list.selectedIndex=org_list.querySelector('option[value="'+id+'"]').index;
}

Comment utiliser?

selectOrganization(25); //this will select SONY from option List

Vos commentaires sont les bienvenus. :) AzmatHunzai.

Après de nombreuses recherches, j'ai essayé @kzh sur la liste de sélection où je ne connais que optionle texte intérieur et non l' valueattribut, ce code basé sur la réponse de sélection Je l'ai utilisé pour modifier l'option de sélection en fonction de la page actuelle urlsur ce format http://www.example.com/index.php?u=Steve

<select id="sel">
    <option>Joe</option>
    <option>Steve</option>
    <option>Jack</option>
</select>
<script>
    var val = window.location.href.split('u=')[1]; // to filter ?u= query 
    var sel = document.getElementById('sel');
    var opts = sel.options;
    for(var opt, j = 0; opt = opts[j]; j++) {
        // search are based on text inside option Attr
        if(opt.text == val) {
            sel.selectedIndex = j;
            break;
        }
    }
</script>

Cela gardera les urlparamètres affichés comme sélectionnés pour le rendre plus convivial et le visiteur sait quelle page ou quel profil il est en train de consulter.

Je l'ai utilisé après avoir mis à jour un registre et changé l'état de la demande via ajax, puis je fais une requête avec le nouvel état dans le même script et le mets dans le nouvel état de l'élément de balise de sélection pour mettre à jour la vue.

var objSel = document.getElementById("selectObj");
objSel.selectedIndex = elementSelected;

J'espère que c'est utile.

Version Vanilla.JS légèrement plus soignée. En supposant que vous avez déjà corrigé les nodeListmanquants .forEach():

NodeList.prototype.forEach = Array.prototype.forEach

Juste:

var requiredValue = 'i-50332a31',   
  selectBox = document.querySelector('select')

selectBox.childNodes.forEach(function(element, index){
  if ( element.value === requiredValue ) {
    selectBox.selectedIndex = index
  }
})