46

如何使用显示文本作为参考设置选择元素的 selectedIndex？

例子：

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

4

7 回答 7

63

试试这个：

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;
        }
    }
}
于 2011-06-02T04:39:30.933 回答
9 
<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>

设置 select 标签的 selectedIndex 属性将选择正确的项目。这是一个好主意，而不是比较两个值（选项 innerHTML && 动物值），您可以使用 indexOf() 方法或正则表达式来选择正确的选项，尽管存在大小写或空格

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

或使用.match(/regular expression/)

于 2011-06-02T04:39:47.377 回答
3

试试这个：

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;
      }     
    }
}
于 2011-06-02T04:38:25.053 回答
3

如果你想要这个没有循环或 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('Animal').querySelectorAll('option[value="searchterm"]'); 在索引对象中，您现在可以执行以下操作： x[0].index

于 2018-07-19T17:34:35.473 回答
2

您可以通过此代码设置索引：

sel.selectedIndex = 0;

onclick但请记住在这种做法中要注意，如果您选择下拉列表中选择的上一个值，您将无法调用服务器端方法。

于 2013-05-31T11:59:11.610 回答
0

将名称属性添加到您的选项：

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

有了它，您可以使用 HTMLOptionsCollection.namedItem("Chicken").value 来设置选择元素的值。

于 2017-01-17T22:42:42.407 回答
-1

您可以使用 HTMLOptionsCollection.namedItem() 这意味着您必须定义您的选择选项以具有名称属性并具有显示文本的值。例如加利福尼亚

于 2017-01-17T22:46:54.777 回答