如何在下拉列表中选择一个值？

Question

我有这样的下拉菜单

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

我用这行来选择它在Mozilla中工作的值而不是在IE中？为什么不工作？

var element = document.getElementById("Mobility");
element.value = "10";

Answer 1

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

Answer 2

最简单的方法就是使用它

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

myselect是您的下拉列表的名称香蕉只是下拉列表中的一项

Answer 3

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是值

Answer 4

如果你知道价值,最简单的解决方案

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

Answer 5

我意识到这是一个古老的问题，但是我将针对用例发布解决方案，以防其他人遇到实施James Hill的答案时遇到的相同情况（上述）。

我在尝试解决同一问题时发现了这个问题。 詹姆斯的回答使我达到了90％。但是，对于我的用例，从下拉列表中选择项目也会触发下拉onchange事件在页面上执行操作。James编写的代码并未触发此事件（至少在我正在测试的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;
}

请注意该object.onchange()呼叫，该呼叫已添加到原始解决方案中。这将调用处理程序以确保在页面上发生操作。

编辑

添加了代码，如果value找不到选项，则引发异常；这是我的用例所必需的。

Answer 6

使用 JavaScript：

document.getElementById('drpSelectSourceLibrary').value = 'Seven';

使用 Jquery：

$('select').prop('selectedIndex', 3); // This will select the 4th option from the dropdown list

Answer 7

使用一些 ES6：

首先获取选项，根据选项过滤值并将selected属性设置为true。

window.onload = () => {

  [...document.querySelector(`#Mobility`).options]
    .filter(x => x.value === "12")[0]
    .setAttribute('selected', true);

};

<select style="width: 280px" id="Mobility" name="Mobility">
  <option selected disabled>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>