我有以下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函数,我如何在列表中选择适当的选项?
如果你正在使用jQuery,你也可以这样做:
$('#leaveCode').val('14');
这将选择值为14的<选项>。
使用纯Javascript,这也可以通过两个Document方法实现:
与文档。querySelector,你可以根据CSS选择器选择一个元素:
document.querySelector(“# leaveCode”)。Value = '14'
使用更成熟的document.getElementById()方法,正如函数名称所暗示的那样,它将允许您根据其id选择元素:
. 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>