如何以编程方式设置使用JavaScript的select框元素的值?

我有以下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函数作为参数,如何在列表中select适当的选项?

 function SelectElement(valueToSelect) { var element = document.getElementById('leaveCode'); element.value = valueToSelect; } 

如果你使用jQuery,你也可以这样做

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

这将select值为14的选项

 function setSelectValue (id, val) { document.getElementById(id).value = val; } setSelectValue('leaveCode', 14); 

我比较了不同的方法:

比较如何用JS或jQuery设置select的值的不同方法

码:

 $(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.注意:我做这个testing的唯一原因,是因为jQuery在我们的列表上执行了超过2000个条目(它们在选项之间有更长的文本)。 我们有一个val()之后大约2秒的延迟

还要注意:我是根据实际值设置值,而不是文本值

不回答问题,但您也可以通过索引select,其中我是您希望select的项目的索引:

 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; 
 document.getElementById('leaveCode').value = '10'; 

这应该将select设置为“年假”

我尝试了以上基于JavaScript / jQuery的解决scheme,例如:

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

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

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

他们都没有工作,因为AngularJS表单validation没有被解雇。 虽然select了正确的选项(并在表单中显示),但input仍然无效( ng-pristineng-invalid类仍然存在)。

要强制AngularJSvalidation,请在select一个选项后调用jQuery change() :

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

 var leaveCode = document.querySelector('#leaveCode'); leaveCode[i].selected = true; $(leaveCode).change(); 
function foo(value) { var e = document.getElementById('leaveCode'); if(e) e.value = value; }
function foo(value) { var e = document.getElementById('leaveCode'); if(e) e.value = value; } 

最简单的方法,如果你需要:
1)点击定义select选项的button
2)转到另一个页面,select选项
3)在另一个页面上select了该选项值

1)你的button链接(比如在主页上)

 <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是你的页面select选项。请注意页面url有?选项= 1或2)

2)把这个代码放在你的第二页(我的情况contact.php

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

3)根据点击的buttonselect选项值

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

.. 等等。
所以这是通过GET方式将值传递给另一个页面(带有select列表)的简单方法。 没有forms,没有ID ..只有3个步骤,它的作品完美。

为什么不为元素的ID添加一个variables,并使其成为一个可重用的函数?

 function SelectElement(selectElementId, valueToSelect) { var element = document.getElementById(selectElementId); element.value = valueToSelect; } 

假设你的表单被命名为form1

 function selectValue(val) { var lc = document.form1.leaveCode; for (i=0; i&lt;lc.length; i++) { if (lc.options[i].value == val) { lc.selectedIndex = i; return; } } } 

应该是这样的话:

 function setValue(inVal){ var dl = document.getElementById('leaveCode'); var el =0; for (var i=0; i<dl.options.length; i++){ if (dl.options[i].value == inVal){ el=i; break; } } dl.selectedIndex = el; } 

有不同的方法来select使用Javascript下拉的值 。

你最有可能想要这个:

 $("._statusDDL").val('2'); 

要么

 $('select').prop('selectedIndex', 3); 

使用Jquery:

 $('leaveCode').prop('selectedIndex', 10); 

如果使用PHP,你可以尝试这样的事情:

 $value = '11'; $first = ''; $second = ''; $third = ''; $fourth = ''; switch($value) { case '10' : $first = 'selected'; break; case '11' : $second = 'selected'; break; case '14' : $third = 'selected'; break; case '17' : $fourth = 'selected'; break; } echo' <select id="leaveCode" name="leaveCode"> <option value="10" '. $first .'>Annual Leave</option> <option value="11" '. $second .'>Medical Leave</option> <option value="14" '. $third .'>Long Service</option> <option value="17" '. $fourth .'>Leave Without Pay</option> </select>'; 

恐怕我目前无法testing,但在过去,我相信我必须给每个选项标签一个ID,然后我做了这样的事情:

 document.getElementById("optionID").select(); 

如果这不起作用,也许会让你更接近解决scheme:P