如何以编程方式设置使用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-pristine和ng-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<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
