web-dev-qa-db-fra.com

Comment définir selectedIndex of select element en utilisant le texte d'affichage?

Comment définir selectedIndex of select element en utilisant le texte d'affichage comme référence?

Exemple:

<input id="AnimalToFind" type="text" />
<select id="Animals">
    <option value="0">Chicken</option>
    <option value="1">Crocodile</option>
    <option value="2">Monkey</option>
</select>
<input type="button" onclick="SelectAnimal()" />

<script type="text/javascript">
    function SelectAnimal()
    {
        //Set selected option of Animals based on AnimalToFind value...
    }
 </script>

Y a-t-il un autre moyen de faire cela sans boucle? Vous savez, je pense à un code JavaScript intégré ou à quelque chose d'autre. De plus, je n'utilise pas jQuery ...

javascriptselectedindex
41
dpp

Essaye ça:

function SelectAnimal() {
    var sel = document.getElementById('Animals');
    var val = document.getElementById('AnimalToFind').value;
    for(var i = 0, j = sel.options.length; i < j; ++i) {
        if(sel.options[i].innerHTML === val) {
           sel.selectedIndex = i;
           break;
        }
    }
}
57
Jacob Relkin
<script type="text/javascript">
     function SelectAnimal(){
         //Set selected option of Animals based on AnimalToFind value...
         var animalTofind = document.getElementById('AnimalToFind');
         var selection = document.getElementById('Animals');

        // select element
        for(var i=0;i<selection.options.length;i++){
            if (selection.options[i].innerHTML == animalTofind.value) {
                selection.selectedIndex = i;
                break;
            }
        }
     }
</script>

la définition de la propriété selectedIndex de la balise select permet de choisir l'élément correct. c'est une bonne idée qu'au lieu de comparer les deux valeurs (options innerHTML && animal value), vous pouvez utiliser la méthode indexOf () ou l'expression régulière pour sélectionner l'option correcte malgré la casse ou la présence d'espaces

selection.options[i].innerHTML.indexOf(animalTofind.value) != -1;

ou en utilisant .match(/regular expression/)

9
Ibu

Essaye ça:

function SelectAnimal()
{
    var animals = document.getElementById('Animals');
    var animalsToFind = document.getElementById('AnimalToFind');
    // get the options length
    var len = animals.options.length;
    for(i = 0; i < len; i++)
    {
      // check the current option's text if it's the same with the input box
      if (animals.options[i].innerHTML == animalsToFind.value)
      {
         animals.selectedIndex = i;
         break;
      }     
    }
}
3
tradyblix

Si vous voulez ceci sans boucles ni jquery, vous pouvez utiliser ceci Ce qui suit est JavaScript. Cela fonctionne pour les navigateurs Web actuels. Compte tenu de l'âge de la question, je ne sais pas si cela aurait fonctionné en 2011. Notez que l'utilisation de sélecteurs de style css est extrêmement puissante et peut aider à réduire beaucoup de code.

// Please note that querySelectorAll will return a match for 
// for the term...if there is more than one then you will 
// have to loop through the returned object
var selectAnimal = function() {
  var animals = document.getElementById('animal');
  if (animals) {
    var x = animals.querySelectorAll('option[value="frog"]');
    if (x.length === 1) {
      console.log(x[0].index);
      animals.selectedIndex = x[0].index;
    }
  }
}
<html>

<head>
  <title>Test without loop or jquery</title>
</head>

<body>
  <label>Animal to select
  <select id='animal'>
    <option value='nothing'></option>
    <option value='dog'>dog</option>
    <option value='cat'>cat</option>
    <option value='mouse'>mouse</option>
    <option value='rat'>rat</option>
    <option value='frog'>frog</option>
    <option value='horse'>horse</option>
  </select>
  </label>
  <button onclick="selectAnimal()">Click to select animal</button>

</body>

</html>

document.getElementById ('Animal'). querySelectorAll ('option [value = "searchterm"]'); dans l'objet index, vous pouvez maintenant effectuer les opérations suivantes: x [0] .index

1
Brandon

Vous pouvez définir l'index par ce code:

sel.selectedIndex = 0;

mais rappelez-vous une mise en garde dans cette pratique, vous ne pourriez pas appeler la méthode côté serveur onclick si vous sélectionnez la valeur précédente sélectionnée dans la liste déroulante.

1
ssingh

Ajouter un attribut de nom à votre option:

<option value="0" name="Chicken">Chicken</option>

Avec cela, vous pouvez utiliser la valeur HTMLOptionsCollection.namedItem ("Poulet"). Pour définir la valeur de votre élément select.

0
Jose