logo标签列表

如何使用JavaScript编程方式设置下拉框元素的值？

javascripthtmldom
607

我有以下HTML <select> 元素：

<select id="leaveCode" name="leaveCode">
  <option value="10">Annual Leave</option>
  <option value="11">Medical Leave</option>
  <option value="14">Long Service</option>
  <option value="17">Leave Without Pay</option>
</select>

如何使用一个带有参数 leaveCode 的 JavaScript 函数，在列表中选择适当的选项？

1
查看不同方法性能的比较，请见我的答案。 - Toskan
17个回答
760
您可以使用此函数： 

function selectElement(id, valueToSelect) {    
    let element = document.getElementById(id);
    element.value = valueToSelect;
}

selectElement('leaveCode', '11');
<select id="leaveCode" name="leaveCode">
  <option value="10">Annual Leave</option>
  <option value="11">Medical Leave</option>
  <option value="14">Long Service</option>
  <option value="17">Leave Without Pay</option>
</select>

如果您想要触发 onchange 事件，您也可以使用以下方式：

element.dispatchEvent(new Event('change'))
4
非常好的答案，这比遍历选项要简单得多。而且它符合标准：http://dev.w3.org/html5/spec/the-select-element.html#the-select-element。如果存在浏览器不兼容性（当然是有的 :）），我很想知道它们是什么。通常你会指望ppk为此提供支持，但他顽固地拒绝在我的搜索结果中出现。 - philo
11
多项选择怎么处理？在 Chrome 25 中，多选似乎无法正常工作。 - Georgii Ivankin
3
正如@ring0所指出的，当valueToSelect不存在时，Chrome会插入一个空白条目；而IE和Firefox则会保留最后选择的值。 - Karthik Bose
1
注意：对于IE浏览器，<option>必须具有value='valueToSelect'属性。不能使用<option>..</option>中的显示文本作为valueToSelect。 - Peter Quiring
20
如果你需要触发 change 事件，你也应该执行：element.dispatchEvent(new Event('change')); - Patrick James McDougle
显示剩余3条评论
153

如果您正在使用jQuery，您也可以这样做：

$('#leaveCode').val('14');

这将选择值为14的<option>。

使用普通的Javascript，也可以通过两个Document方法实现：

  • With document.querySelector, you can select an element based on a CSS selector:

    document.querySelector('#leaveCode').value = '14'

  • Using the more established approach with document.getElementById(), that will, as the name of the function implies, let you select an element based on its id:

    document.getElementById('leaveCode').value = '14'
您可以运行下面的代码段，以查看这些方法和jQuery函数的实际效果： 

const jQueryFunction = () => {
  
  $('#leaveCode').val('14'); 
  
}

const querySelectorFunction = () => {
  
  document.querySelector('#leaveCode').value = '14' 
  
}

const getElementByIdFunction = () => {
  
  document.getElementById('leaveCode').value='14' 
  
}
input {
  display:block;
  margin: 10px;
  padding: 10px
}
<select id="leaveCode" name="leaveCode">
  <option value="10">Annual Leave</option>
  <option value="11">Medical Leave</option>
  <option value="14">Long Service</option>
  <option value="17">Leave Without Pay</option>
</select>

<input type="button" value="$('#leaveCode').val('14');" onclick="jQueryFunction()" />
<input type="button" value="document.querySelector('#leaveCode').value = '14'" onclick="querySelectorFunction()" />
<input type="button" value="document.getElementById('leaveCode').value = '14'" onclick="getElementByIdFunction()" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

5
这也可以用于多选；只需将字符串数组传递给“val”函数，而不是单个字符串。参见：https://dev59.com/PWQn5IYBdhLWcg3wxZgn#16583001。 - Triynko
有没有办法通过这样做也触发$('#leaveCode').on('change', function()？ - Lieuwe
12
$("#leaveCode").val("14").change(); - Loren
32
function setSelectValue (id, val) {
    document.getElementById(id).value = val;
}
setSelectValue('leaveCode', 14);
24

回答非所问，但您也可以通过索引进行选择，其中 i 是您希望选择的项目的索引：

var formObj = document.getElementById('myForm');
formObj.leaveCode[i].selected = true;

您也可以通过循环遍历项目并选择显示值：

for (var i = 0, len < formObj.leaveCode.length; i < len; i++) 
    if (formObj.leaveCode[i].value == 'xxx') formObj.leaveCode[i].selected = true;
5
formObj.leaveCode[i].selected = true; 应该改为 formObj.options[i].selected = true; 吗？ - David Christopher Reynolds
18

简短

这是对William的回答进行尺寸改进

leaveCode.value = '14';


leaveCode.value = '14';
<select id="leaveCode" name="leaveCode">
  <option value="10">Annual Leave</option>
  <option value="11">Medical Leave</option>
  <option value="14">Long Service</option>
  <option value="17">Leave Without Pay</option>
</select>

3
这个应该使用jQuery选择器或者其他什么东西吧？还是我今天早上太慢了，可以直接在js中调用some_id.value？ - logicOnAbstractions
3
这应该成为被接受的答案！ - Les Nightingill
@logicOnAbstractions 是的，事实证明在浏览器的 JavaScript 中可以简单地调用 some_id.value 而不是 document.getElementByID("some_id").value，尽管你可能不应该这样做。讨论在这里：https://dev59.com/118e5IYBdhLWcg3w0dJJ 看起来这是一个为了向后兼容而保留的非常古老的功能。虽然它更加简洁和美观，但很诱人... - Kai Carver
17

我比较了不同的方法：

比较使用JS或jQuery设置选择框值的不同方法

代码：

$(function() {
    var oldT = new Date().getTime();
     var element = document.getElementById('myId');
    element.value = 4;
    console.error(new Date().getTime() - oldT);

    oldT = new Date().getTime();
    $("#myId option").filter(function() {
        return $(this).attr('value') == 4;
    }).attr('selected', true);
    console.error(new Date().getTime() - oldT);

    oldT = new Date().getTime();
    $("#myId").val("4");
    console.error(new Date().getTime() - oldT);
});

一个包含 ~4000 个元素的 select 元素的输出:

  • 1 毫秒
  • 58 毫秒
  • 612 毫秒

以上是在 Firefox 10 浏览器下的测试结果。注意：我进行这个测试的唯一原因是因为当列表中有 ~2000 个条目时，jQuery 的表现非常差（它们在选项之间有更长的文本）。我们使用 val() 后大约需要等待 2 秒钟。

另外，请注意：我根据实际值而不是文本值来设置值。

13

我尝试了上述基于JavaScript/jQuery的解决方案，例如：

$("#leaveCode").val("14");

和

var leaveCode = document.querySelector('#leaveCode');
leaveCode[i].selected = true;

在一个AngularJS应用程序中，有一个必填的<select>元素。

由于AngularJS表单验证没有触发，所以它们都无法起作用。即使选择了正确的选项（并在表单中显示），输入仍然无效（ng-pristine和ng-invalid类仍然存在）。

要强制触发AngularJS验证，请在选择选项后调用jQuery的change()方法:

$("#leaveCode").val("14").change();

和

var leaveCode = document.querySelector('#leaveCode');
leaveCode[i].selected = true;
$(leaveCode).change();
为什么要使用jQuery，而不是已经可以用Angular实现呢？当使用Angular本身时，难道你没有设置值的能力，并且内置支持触发更改吗（我不知道，我使用React，在5秒谷歌后找到了这篇文章：https://dev59.com/uKvka4cB1Zd3GeqPrFH1）？因为这意味着你不必通过额外的±30kb库“只为此”来绕过Angular :) - SidOfc
13
document.getElementById('leaveCode').value = '10';

这应该将选择设置为“年假”

4
如果您需要：
1）点击定义选择选项的按钮
2）转到另一个页面，在该页面上有选择选项
3）在另一个页面上选择该选项的值
最简单的方法是：

1) 在您的按钮链接（例如主页）

<a onclick="location.href='contact.php?option=1';" style="cursor:pointer;">Sales</a>
<a onclick="location.href='contact.php?option=2';" style="cursor:pointer;">IT</a>

(其中contact.php是您具有选择选项的页面。请注意，页面网址带有?option=1或2)

2)将此代码放在您的第二个页面上（我的情况是contact.php）

<?
if (isset($_GET['option']) && $_GET['option'] != "") {
$pg = $_GET['option'];              
} ?>

3) 根据按钮点击的情况，使选项值被选中

<select>
<option value="Sales" <? if ($pg == '1') { echo "selected"; } ?> >Sales</option>
<option value="IT" <? if ($pg == '2') { echo "selected"; } ?> >IT</option>
</select>

..等等。


所以这是一种通过GET在URL中将值传递到另一个页面的简单方法（使用选择选项列表）。没有表格，没有ID...只需3个步骤，它就可以完美地工作。
3

function foo(value)
{
    // 通过id获取元素
    var e = document.getElementById('leaveCode');
    // 判断元素是否存在，存在则将值赋给该元素
    if(e) e.value = value;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接