Как установить selectedIndex элемента select с помощью отображаемого текста? - PullRequest
Новая
       12

Как установить selectedIndex элемента select с помощью отображаемого текста?

41 голосов
/ 02 июня 2011

Как установить selectedIndex элемента select, используя отображаемый текст в качестве ссылки?

Пример: 

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

Есть ли другой способ сделать это без цикла?Вы знаете, я имею в виду встроенный код JavaScript или что-то в этом роде.Также я не использую jQuery ...

Ответы [ 7 ]

57 голосов
/ 02 июня 2011

Попробуйте это: 

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;
        }
    }
}
9 голосов
/ 02 июня 2011 
<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>

установка свойства selectedIndex тега select выберет правильный элемент.Рекомендуется вместо сравнения двух значений (параметры innerHTML && animal value) использовать метод indexOf () или регулярное выражение, чтобы выбрать правильный параметр, несмотря на регистр или наличие пробелов 

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

или используя .match(/regular expression/)

3 голосов
/ 02 июня 2011

Попробуйте это: 

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;
      }     
    }
}
1 голос
/ 19 июля 2018

Если вы хотите это без циклов или jquery, вы можете использовать следующее Это прямой JavaScript. Это работает для текущих веб-браузеров. Учитывая возраст вопроса, я не уверен, что это сработало бы еще в 2011 году. Обратите внимание, что использование селекторов в стиле CSS чрезвычайно эффективно и может помочь сократить объем кода. 

// 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 ( 'Животное') querySelectorAll ( 'параметр [значение = "SEARCHTERM"]'). в объекте index теперь вы можете сделать следующее: х [0] .index

1 голос
/ 31 мая 2013

Вы можете установить индекс с помощью этого кода: 

sel.selectedIndex = 0;

, но помните, что в этом случае следует соблюдать осторожность. Вы не сможете вызвать метод onclick на стороне сервера, если выберете предыдущее выбранное значениев выпадающем списке ..

0 голосов
/ 18 января 2017

Вы можете использовать HTMLOptionsCollection.namedItem () Это означает, что вы должны определить параметры выбора, чтобы иметь атрибут name и значение отображаемого текста. например California

0 голосов
/ 18 января 2017

Добавить атрибут имени к вашему варианту: 

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

При этом вы можете использовать значение HTMLOptionsCollection.namedItem ("Chicken"). Для установки значения элемента select.

...