如何在下拉select一个值的JavaScript？
我有这样的下拉
<select style="width: 280px" id="Mobility" name="Mobility"> <option selected="">Please Select</option> <option>K</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> <option>11</option> <option>12</option> </select> 我使用这一行来select它在Mozilla不工作在IE中的值？ 为什么它不工作？
var element = document.getElementById("Mobility"); element.value = "10";
使用selectedIndex属性 ：
document.getElementById("Mobility").selectedIndex = 12; //Option 10
备选方法：
遍历每个值：
//Get select object var objSelect = document.getElementById("Mobility"); //Set selected setSelectedValue(objSelect, "10"); function setSelectedValue(selectObj, valueToSet) { for (var i = 0; i < selectObj.options.length; i++) { if (selectObj.options[i].text== valueToSet) { selectObj.options[i].selected = true; return; } } }
function setSelectedIndex(s, v) { for ( var i = 0; i < s.options.length; i++ ) { if ( s.options[i].value == v ) { s.options[i].selected = true; return; } } }
其中s是下拉，v是值
最简单的解决scheme，如果你知道的价值
document.querySelector('option[value=" + value +"]').selected = true
最简单的方法就是使用这个
document.getElementById("mySelect").value = "banana";
myselect是你的下拉式香蕉的名字只是你的下拉列表中的一个项目
我意识到这是一个古老的问题，但是我会为我的用例发布解决scheme，以防其他人遇到我在执行James Hill的答案（上面）时所遇到的相同情况。
我试图解决同样的问题，我发现这个问题。 詹姆斯的回答让我有90％ 的回答 。 但是，对于我的用例，从下拉列表中select项目也触发了下拉的onchange事件页面上的操作。 James写的代码没有触发这个事件（至less在我testing的Firefox中）。 因此，我做了如下小改动：
function setSelectedValue(object, value) { for (var i = 0; i < object.options.length; i++) { if (object.options[i].text === value) { object.options[i].selected = true; object.onchange(); return; } } // Throw exception if option `value` not found. var tag = object.nodeName; var str = "Option '" + value + "' not found"; if (object.id != '') { str = str + " in //" + object.nodeName.toLowerCase() + "[@id='" + object.id + "']." } else if (object.name != '') { str = str + " in //" + object.nodeName.toLowerCase() + "[@name='" + object.name + "']." } else { str += "." } throw str; }
请注意我添加到原始解决scheme中的object.onchange()调用。 这将调用处理程序以确保页面上的操作发生。
编辑
如果选项value未find，则添加代码以引发exception; 这是我的用例需要的。
这可以做到这一点
document.forms['someform'].elements['someelement'].value
是。 正如在post中提到的， value属性是非标准的，并且不适用于IE。 您将需要使用selectedIndex属性来实现这一点。 您可以参考w3schools DOM参考来查看HTML元素的属性。 以下链接将给你在select元素上可以使用的属性列表。
http://www.w3schools.com/jsref/dom_obj_select.asp
更新
IE浏览器在2011年没有得到支持。 正如芬兰人所说，目前是支持的。
请参阅这篇文章 。 他们已经用很多方式使用JavaScript或者Jquery来解释它。
使用Javascript：
document.getElementById('drpSelectSourceLibrary').value = 'Seven';
使用Jquery：
$('select').prop('selectedIndex', 3); // This will select the 4th option from the dropdown list
而不是做
function setSelectedIndex(s, v) { for ( var i = 0; i < s.options.length; i++ ) { if ( s.options[i].value == v ) { s.options[i].selected = true; return; } } }
我这样做解决了这个问题
function setSelectedValue(dropDownList, valueToSet) { var option = dropDownList.firstChild; for (var i = 0; i < dropDownList.length; i++) { if (option.text.trim().toLowerCase() == valueToSet.trim().toLowerCase()) { option.selected = true; return; } option = option.nextElementSibling; } }
如果你使用string，你应该使用.trim()方法，有时候空格会导致麻烦，而且在javascriptdebugging会话中很难检测到。
dropDownList.firstChild实际上是您的第一个option标记。 然后，通过执行option.nextElementSibling您可以转到下一个option标记，以便在下拉列表元素中进行下一个select。 如果你想获得option标签的数量，你可以使用我在for循环中使用的dropDownList.length 。
希望这有助于某人。
