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

Utilisez le selectedIndex propriété :

document.getElementById("Mobility").selectedIndex = 12; //Option 10

Méthode alternative :

Bouclez sur chaque valeur :

//Get select object
var objSelect = document.getElementById("Mobility");

//Set selected
setSelectedValue(objSelect, "10");

function setSelectedValue(selectObj, valueToSet) {
    for (var i = 0; i < selectObj.options.length; i++) {
        if (selectObj.options[i].text== valueToSet) {
            selectObj.options[i].selected = true;
            return;
        }
    }
}

Answer 2

Le moyen le plus simple est d'utiliser cette

document.getElementById("mySelect").value = "banana";

myselect est le nom de votre liste déroulante banane est juste un des éléments de votre liste déroulante

Answer 3

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;
        }
    }
}

Où s est la liste déroulante et v est la valeur

Answer 4

La solution la plus simple possible si vous connaissez la valeur

document.querySelector('option[value=" + value +"]').selected = true

Answer 5

Je me rends compte qu'il s'agit d'une vieille question, mais je vais poster la solution pour mon cas d'utilisation, au cas où d'autres personnes se trouveraient dans la même situation que moi lors de l'implémentation Réponse de James Hill (ci-dessus) .

J'ai trouvé cette question en essayant de résoudre le même problème. La réponse de James m'a permis d'atteindre 90%. Cependant, dans mon cas d'utilisation, la sélection de l'élément dans la liste déroulante déclenche également une action sur la page à partir de la liste déroulante. onchange événement. Le code de James tel qu'il est écrit ne déclenche pas cet événement (du moins dans Firefox, avec lequel je faisais mes tests). En conséquence, j'ai apporté la modification mineure suivante :

function setSelectedValue(object, value) {
    for (var i = 0; i < object.options.length; i++) {
        if (object.options[i].text === value) {
            object.options[i].selected = true;
            object.onchange();
            return;
        }
    }

    // Throw exception if option `value` not found.
    var tag = object.nodeName;
    var str = "Option '" + value + "' not found";

    if (object.id != '') {
        str = str + " in //" + object.nodeName.toLowerCase()
              + "[@id='" + object.id + "']."
    }

    else if (object.name != '') {
        str = str + " in //" + object.nodeName.toLowerCase()
              + "[@name='" + object.name + "']."
    }

    else {
        str += "."
    }

    throw str;
}

Notez le object.onchange() que j'ai ajouté à la solution originale . Il appelle le gestionnaire pour s'assurer que l'action sur la page se produit.

Editar

Ajout d'un code permettant de lever une exception si l'option value n'est pas trouvé ; ceci est nécessaire pour mon cas d'utilisation.