如何使用显示文本设置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选项以具有名称属性并具有显示文本的值。 如加州