web-dev-qa-db-fra.com

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

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

javascriptjqueryhtml
110
llihttocs

Vanilla JavaScript

Utiliser du vieux JavaScript ordinaire:

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 vraiment voulez 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 d'attributs de valeur

Si vos options ont des attributs de valeur qui diffèrent de leur contenu de texte et que vous souhaitez sélectionner via le contenu de texte:

<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é la configuration ci-dessus et que vous souhaitez sélectionner une valeur à l'aide de jQuery, vous pouvez procéder comme auparavant:

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

DOM moderne

Pour les navigateurs prenant en charge document.querySelector et la propriété HTMLOptionElement::selected , il s'agit d'une méthode plus succincte pour 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: ceci 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

263
kzh

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

La bonne façon de sélectionner l'Alaska et d'afficher le bon élément comme 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();
19
Justin Buser

Markup

<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

7
Shef

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

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

DEMO

4
Ivin Raj

Je souhaite modifier la valeur et le contenu du contenu 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 ça aide quelqu'un. Bonne chance.
Jusqu'à vote si cela vous a aidé.

2
Manohar Reddy Poreddy

Testez cette démo

  1. Sélection d'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'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;
      }
});

HTML de soutien

<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>
2
vol7ron

J'ai utilisé presque toutes les réponses affichées ici, mais je ne suis pas à l'aise avec cela, alors j'ai creusé un pas supplémentaire et trouvé une solution facile qui répond à mes besoins et me valait la peine de partager avec vous les gars.
Au lieu de parcourir toutes les options ou d’utiliser JQuery vous pouvez utiliser CoreJSpar é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.

1
Azmat Karim Khan

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

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

Je l'ai utilisé après la mise à jour d'un registre et la modification de l'état de la requête via ajax, puis une requête avec le nouvel état dans le même script et l'a placé dans le nouvel état de l'élément de balise select pour mettre à jour la vue.

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

J'espère que c'est utile.

0
user7071893

Après beaucoup de recherches, j'ai essayé @kzh sur une liste de sélection où je ne connais que option texte intérieur non value attribut, Code basé sur la réponse sélectionnée, je l'ai utilisé pour modifier l'option de sélection en fonction de la page actuelle urlde 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>

Ceci conservera les paramètres url affichés comme sélectionnés pour le rendre plus convivial et le visiteur saura quelle page ou quel profil il est en train de consulter. 

0
Salem