Comment sélectionner une valeur dans une liste déroulante de sélection avec JavaScript ?

Question

J'ai une liste déroulante comme celle-ci

<select style="width: 280px" id="Mobility" name="Mobility">
  <option selected="">Please Select</option>
  <option>K</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
  <option>11</option>
  <option>12</option>
</select>

J'utilise cette ligne pour sélectionner une valeur ; cela fonctionne dans Mozilla mais pas dans IE ? Pourquoi cela ne fonctionne-t-il pas ?

var element = document.getElementById("Mobility");
element.value = "10";

Answer 1

Utilisation de Javascript :

document.getElementById('drpSelectSourceLibrary').value = 'Seven';

Utilisation de Jquery :

$('select').prop('selectedIndex', 3); // This will select the 4th option from the dropdown list

Answer 2

Cela peut le faire

document.forms['someform'].elements['someelement'].value

Answer 3

Utilisation de l'ES6 :

Obtenez d'abord les options, filtrez la valeur en fonction de l'option et mettez l'attribut sélectionné à true.

window.onload = () => {

  [...document.querySelector(`#Mobility`).options]
    .filter(x => x.value === "12")[0]
    .setAttribute('selected', true);

};

<select style="width: 280px" id="Mobility" name="Mobility">
  <option selected disabled>Please Select</option>
  <option>K</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
  <option>11</option>
  <option>12</option>
</select>

Answer 4

Oui. Comme mentionné dans les posts, value est non standard et ne fonctionne pas avec IE. Vous devrez utiliser la propriété selectedIndex pour y parvenir. Vous pouvez vous référer à la référence DOM de w3schools pour voir les propriétés des éléments HTML. Le lien suivant vous donnera la liste des propriétés avec lesquelles vous pouvez travailler sur l'élément select.

http://www.w3schools.com/jsref/dom_obj_select.asp

Mise à jour

Ceci n'était pas pris en charge en 2011 sur IE. Comme l'a fait remarquer finnTheHuman, elle est prise en charge actuellement.

Answer 5

Au lieu de faire

function setSelectedIndex(s, v) {
    for ( var i = 0; i < s.options.length; i++ ) {
        if ( s.options[i].value == v ) {
            s.options[i].selected = true;
            return;
        }
    }
}

J'ai résolu ce problème en faisant ceci

function setSelectedValue(dropDownList, valueToSet) {
    var option = dropDownList.firstChild;
    for (var i = 0; i < dropDownList.length; i++) {
        if (option.text.trim().toLowerCase() == valueToSet.trim().toLowerCase()) {
            option.selected = true;
            return;
        }
        option = option.nextElementSibling;
    }
}

Si vous travaillez avec des chaînes de caractères, vous devez utiliser la fonction .trim() les espaces vides peuvent parfois causer des problèmes et ils sont difficiles à détecter dans les sessions de débogage de javascript.

dropDownList.firstChild sera en fait votre première option étiquette. Ensuite, en faisant option.nextElementSibling vous pouvez passer à l'étape suivante option donc le choix suivant dans votre élément de liste déroulante. Si vous voulez obtenir le nombre de option balises que vous pouvez utiliser dropDownList.length que j'ai utilisé dans la boucle for.

J'espère que cela aidera quelqu'un.