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

我有以下HTML

元素：

<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函数，如何在列表中选择适当的选项？

您可以使用此函数：

selectElement（'leaveCode'，'11'）
函数selectElement（id，valueToSelect）{
let element=document.getElementById（id）；
element.value=要选择的值；
}

不回答问题，但您也可以按索引选择，其中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;

for（变量i=0，len

我现在恐怕无法测试这一点，但在过去，我相信我必须给每个选项标签一个ID，然后我做了如下操作：

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

如果这不起作用，也许它会让你更接近一个解决方案：p

function foo(value)
{
    var e = document.getElementById('leaveCode');
    if(e) e.value = value;
}

---

应将选择设置为“年假”

应符合以下内容：

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

函数设置值（无效）{
var dl=document.getElementById（'leaveCode'）；
var-el=0；
对于（var i=0；i为什么不为元素的Id添加一个变量并使其成为一个可重用的函数

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

如果您使用的是jQuery，还可以执行以下操作：

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

这将选择值为14的


对于纯Javascript，这也可以通过以下两种方式实现：


使用，可以基于CSS选择器选择元素：

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


使用更为成熟的方法，正如函数名称所示，这将允许您根据元素的
id
：

document.getElementById('leaveCode').value = '14'



您可以运行以下截取的代码来查看这些方法和jQuery函数的运行情况：


constjqueryfunction=（）=>{
$（'#leaveCode'）.val（'14'）；
}
常量querySelectorFunction=（）=>{
document.querySelector（'#leaveCode'）。值='14'
}
常量getElementByIdFunction=（）=>{
document.getElementById（'leaveCode'）。value='14'
}
输入{
显示：块；
利润率：10px；
填充：10px
}

年假
病假
长期服务
无薪休假
如果需要，最简单的方法：

1） 单击定义选择选项的按钮

2） 转到另一页，选择选项为

3） 在另一页上选择该选项值

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



（其中contact.php是带有选择选项的页面。注意页面url有？option=1或2）

2）将此代码放在第二页（我的案例contact.php）



3）根据单击的按钮选择选项值

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


>它

…等等。

因此，这是一种通过GET-in url将值传递到另一个页面（使用选择选项列表）的简单方法。无需表单，无需ID。只需3个步骤，即可完美完成。我比较了不同的方法：


代码：

$（函数（）{
var oldT=new Date（）.getTime（）；
var元素=document.getElementById（'myId'）；
元素值=4；
console.error（new Date（）.getTime（）-oldT）；
oldT=新日期（）.getTime（）；
$（“#myId选项”）.filter（函数（）{
返回$（this.attr（'value'）==4；
}).attr（'selected'，true）；
console.error（new Date（）.getTime（）-oldT）；
oldT=新日期（）.getTime（）；
$（“myId”）.val（“4”）；
console.error（new Date（）.getTime（）-oldT）；
});

选择约4000个元素的输出：


1毫秒
58毫秒
612毫秒

注意：我做这个测试的唯一原因是jQuery在我们的列表中表现非常糟糕，有大约2000个条目（选项之间有较长的文本）。
在val（）之后，我们大约延迟了2秒

还要注意：我是根据实际值而不是文本值来设置值的。
如果使用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>';

$value='11'；
$first=''；
$second=''；
$third=''；
$fourth=''；
开关（$value）{
案例“10”：
$first='选定'；
打破
个案"11":
$second='selected'；
打破
案例‘14’：
$THERTH='选定'；
打破
个案"17":
$fourth='选定'；
打破
}
回声'
年假
病假
长期服务
无薪休假
';
我尝试了上述基于JavaScript/jQuery的解决方案，例如：

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

及

在AngularJS应用程序中，有一个必需的元素

它们都不起作用，因为AngularJS表单验证未启动。尽管选择了正确的选项（并显示在表单中），但输入仍然无效（ng pristine和ng invalid类仍然存在）

要强制AngularJS验证，请在选择选项后调用jQuery：

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

及

您很可能希望：

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

或

这里提到的大多数代码对我都不起作用

最后，这起作用了

窗口。addEventListener很重要，否则，JS代码将在选项中获取值之前运行

window.addEventListener（“加载”，函数（）{
//选择ID为的元素-leaveCode//
var formObj=document.getElementById（'leaveCode'）；
//将选项设置为选中状态
让莱恩；
for（设i=0，len=formObj.length；i$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>';

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

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

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

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

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

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

    window.addEventListener("load", function () {
            // Selecting Element with ID - leaveCode  //
            var formObj = document.getElementById('leaveCode');

            // Setting option as selected
            let len;
            for (let i = 0, len = formObj.length; i < len; i++){
                if (formObj[i].value == '<value to show in Select>') 
                 formObj.options[i].selected = true;
            }
    });

leaveCode.value = '14';