如何使用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>

使用：

替代方法：

循环遍历每个值：

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

//获取选择对象
var objSelect=document.getElementById（“移动”）；
//选定
setSelectedValue（对象选择，“10”）；
功能设置SelectedValue（selectObj，valueToSet）{
对于（变量i=0；i

document.forms['someform'].elements['someelement'].value

函数集selectedIndex（s，v）{
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;
        }
    }
}

对于（var i=0；i

---

其中s是下拉列表，v是值

是。正如文章中提到的，

value

属性是非标准的，不适用于IE。您需要使用

selectedIndex

属性来实现这一点。您可以参考W3DOM参考来查看HTML元素的属性。以下链接将为您提供可在select元素上使用的属性列表

document.querySelector('option[value=" + value +"]').selected = true

更新

---

这在2011年IE上不受支持。正如finnTheHuman所评论的，它目前是受支持的。

如果您知道该值，这是最简单的解决方案

document.querySelector('option[value=" + value +"]').selected = true

---

我意识到这是一个老问题，但我将发布我的用例的解决方案，以防其他人遇到与我在实现时相同的情况

我在试图解决同样的问题时发现了这个问题。我得到了90%的回报。然而，对于我的用例，从下拉列表中选择项目也会从下拉列表的

onchange

事件触发页面上的操作。正如所写的那样，它并没有触发这个事件（至少在Firefox中是这样，我正在测试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;
}

函数setSelectedValue（对象、值）{
对于（var i=0；i

注意我添加到的

object.onchange（）

调用。这将调用处理程序以确保页面上的操作发生

编辑 添加了代码，以便在未找到选项

值

时引发异常；这是我的用例所需要的。

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

功能设置选定索引（s，v）{
对于（var i=0；i

我这样做解决了这个问题

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

功能设置选定值（下拉列表，值设置）{
var option=dropDownList.firstChild；
对于（变量i=0；i

如果使用字符串，则应使用

.trim（）

方法，有时空格会导致问题，并且在javascript调试会话中很难检测到空格

dropDownList.firstChild实际上是您的第一个
选项
标签。然后，通过执行
option.nextElementSibling
可以转到下一个
option
标记，以便在dropdownlist元素中选择下一个选项。如果要获取
选项
标记的数量，可以使用我在for循环中使用的
dropDownList.length

希望这对某人有所帮助。
最简单的方法就是使用它

document.getElementById("mySelect").value = "banana";

myselect是您下拉列表的名称香蕉只是您下拉列表中的一个项目
使用一些ES6:

首先获取选项，根据选项筛选值并将选定属性设置为true


window.onload=（）=>{
[…document.querySelector（`Mobility`）.选项]
.filter（x=>x.value==“12”）[0]
.setAttribute（'selected'，true）；
};

请选择
K
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
我当然更喜欢詹姆斯·希尔（James Hill）的方法，但它仍然可能对某些人有用。不管怎样，如果不使用selectedIndex？如果我使用元素名而不是ID，该怎么办？@GregM，基于OP中的HTML，这是行不通的
s.options[i]。value
应该是
s.options[i]。text
@GregM，OP没有为选项指定值，只指定text。好的，是的，你的权利：（，如果他输入了一些值，我的答案就在那里；）如果他在选项中指定了值，比如
K
参考本文的可能副本：如果没有元素ID怎么办？我有元素的名称。@RiponAlWasim您可以使用document.getElementsByName var element=document.getElementsByName（“移动”）[0]；请记下日期。这篇评论写在2011年。我刚试过。IE8上的值很好用。仅供参考。：）“七”是从哪里来的？很好用。这应该是最好的答案
document.getElementById("mySelect").value = "banana";