如何使用显示文本设置select元素的selectedIndex?

如何使用显示文本作为参考来设置select元素的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 …

尝试这个:

 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; } } } 
 <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属性将select正确的项目。 不用比较两个值(选项innerHTML &&动物值),您可以使用indexOf()方法或正则expression式来select正确的选项,尽pipe有空格或缺less空格

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

或使用.match(/regular expression/)

尝试这个:

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

您可以通过以下代码设置索引:

 sel.selectedIndex = 0; 

但在这种做法中请记住谨慎,如果您select在下拉列表中select的前一个值,您将无法调用服务器端onclick方法。

将name属性添加到您的选项中:

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

通过这个,你可以使用HTMLOptionsCollection.namedItem(“Chicken”)。值来设置select元素的值。

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