修改

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

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

This may do it

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

Answer 6

我意识到这是一个老问题，但我会为我的用例发布解决方案，以防其他人遇到我在实施James Hill's answer (above)时遇到的相同情况。

我在尝试解决同样的问题时发现了这个问题。 James' answer让我90％。但是，对于我的用例，从下拉列表中选择项目也会从下拉列表的onchange事件触发页面上的操作。所写的James' code没有触发此事件（至少在我测试的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()来电，我已添加到the original solution。这会调用处理程序以确保页面上的操作发生。

修改

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

Answer 7

使用Javascript：

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

使用Jquery：

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

Answer 8

是。如帖子中所述，value属性是非标准的，不适用于IE。您需要使用selectedIndex属性来实现此目的。您可以参考w3schools DOM参考以查看HTML元素的属性。以下链接将为您提供可在select元素上使用的属性列表。

http://www.w3schools.com/jsref/dom_obj_select.asp

<强>更新

2011年期间，IE不支持此功能。正如finnTheHuman评论的那样，它目前得到了支持。

Answer 9

而不是做

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

如果使用字符串，则应使用.trim()方法，有时空格会导致麻烦，并且在javascript调试会话中很难检测到。

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

希望这有助于某人。

Answer 10

使用一些ES6：

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

window.onload = () => {

  Array.from(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>

Answer 11

您可以使用Java脚本解决此问题，

var newValue = "testing";
document.getElementById('id_Of_the_select_tag').value = value;

或使用Jquery这样：

var newValue = "testing";

$("#id_Of_the_select_tag").val(newValue);

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

11 个答案:

修改