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

解决方案

回答

SelectElement("leaveCode", valueToSelect)

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

回答

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

回答

恐怕目前无法测试，但是在过去，我相信我必须给每个选项标签指定一个ID，然后执行以下操作：

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

如果这不起作用，也许它将使我们更接近解决方案：P

回答

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

回答

document.getElementById('leaveCode').value = '10';

那应该将选择设置为"年假"

回答

应该遵循以下原则：

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

回答

为什么不为元素的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;
    }
  }
}

回答

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

回答

如果我们使用的是jQuery，也可以执行此操作

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

这将选择值为14的选项

编辑：

使用纯Javascript，这也可以通过两种Document方法来实现

使用querySelector，我们可以基于CSS选择器选择一个元素

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

或者使用getDocumentById建立的更完善的方法，就像函数名称所暗示的那样，让我们基于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>