如何使用 JavaScript 更改 HTML 选定选项？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10911526/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I change an HTML selected option using JavaScript?
提问by breq
I have option menu like this:
我有这样的选项菜单：
<form name="AddAndEdit">
<select name="list" id="personlist">
<option value="11">Person1</option>
<option value="27">Person2</option>
<option value="17">Person3</option>
<option value="10">Person4</option>
<option value="7">Person5</option>
<option value="32">Person6</option>
<option value="18">Person7</option>
<option value="29">Person8</option>
<option value="28">Person9</option>
<option value="34">Person10</option>
<option value="12">Person11</option>
<option value="19">Person12</option>
</select>
</form>
And now I want to change the selected option by using an href. For example:
现在我想通过使用 href 来更改选定的选项。例如：
<a href="javascript:void(0);"
onclick="document.getElementById('personlist').getElementsByTagName('option')[11].selected = 'selected';">change</a>
But I want to select the option with value=11 (Person1), not Person12.
但我想用 选择选项value=11 (Person1)，而不是Person12。
How do I change this code?
如何更改此代码？
回答by breq
Change
改变
document.getElementById('personlist').getElementsByTagName('option')[11].selected = 'selected'
to
到
document.getElementById('personlist').value=Person_ID;
回答by Neeraj Singh
Tools as pure JavaScript code for handling Selectbox:
作为处理 Selectbox 的纯 JavaScript 代码的工具：
Graphical Understanding:
图形理解：
Image - A
图像-A
Image - B
图像-B
Image - C
图像-C
Updated - 25-June-2019 | Fiddler DEMO
更新 - 2019 年 6 月 25 日 | 提琴手演示
JavaScript Code:
JavaScript 代码：
/**
* Empty Select Box
* @param eid Element ID
* @param value text
* @param text text
* @author Neeraj.Singh
*/
function emptySelectBoxById(eid, value, text) {
document.getElementById(eid).innerHTML = "<option value='" + value + "'>" + text + "</option>";
}
/**
* Reset Select Box
* @param eid Element ID
*/
function resetSelectBoxById(eid) {
document.getElementById(eid).options[0].selected = 'selected';
}
/**
* Set Select Box Selection By Index
* @param eid Element ID
* @param eindx Element Index
*/
function setSelectBoxByIndex(eid, eindx) {
document.getElementById(eid).getElementsByTagName('option')[eindx].selected = 'selected';
//or
document.getElementById(eid).options[eindx].selected = 'selected';
}
/**
* Set Select Box Selection By Value
* @param eid Element ID
* @param eval Element Index
*/
function setSelectBoxByValue(eid, eval) {
document.getElementById(eid).value = eval;
}
/**
* Set Select Box Selection By Text
* @param eid Element ID
* @param eval Element Index
*/
function setSelectBoxByText(eid, etxt) {
var eid = document.getElementById(eid);
for (var i = 0; i < eid.options.length; ++i) {
if (eid.options[i].text === etxt)
eid.options[i].selected = true;
}
}
/**
* Get Select Box Text By ID
* @param eid Element ID
* @return string
*/
function getSelectBoxText(eid) {
return document.getElementById(eid).options[document.getElementById(eid).selectedIndex].text;
}
/**
* Get Select Box Value By ID
* @param eid Element ID
* @return string
*/
function getSelectBoxValue(id) {
return document.getElementById(id).options[document.getElementById(id).selectedIndex].value;
}
回答by Nick
I believe that the blog post JavaScript Beginners – Select a dropdown option by valuemight help you.
我相信博客文章JavaScript 初学者 – 按值选择下拉选项可能对您有所帮助。
<a href="javascript:void(0);" onclick="selectItemByValue(document.getElementById('personlist'),11)">change</a>
function selectItemByValue(elmnt, value){
for(var i=0; i < elmnt.options.length; i++)
{
if(elmnt.options[i].value === value) {
elmnt.selectedIndex = i;
break;
}
}
}
回答by caspinos
You could also change select.options.selectedIndex DOM attribute like this:
您还可以像这样更改 select.options.selectedIndex DOM 属性：
function selectOption(index){
document.getElementById("select_id").options.selectedIndex = index;
}<p>
<select id="select_id">
<option selected>first option</option>
<option>second option</option>
<option>third option</option>
</select>
</p>
<p>
<button onclick="selectOption(0);">Select first option</button>
<button onclick="selectOption(1);">Select second option</button>
<button onclick="selectOption(2);">Select third option</button>
</p>回答by Ronnie Royston
mySelect.value = myValue;
Where mySelectis your selection box, and myValueis the value you want to change it to.
mySelect您的选择框在哪里，以及myValue您要将其更改为的值。
回答by sunil yaduvanshi
You can use JQuery also
你也可以使用 JQuery
$(document).ready(function () {
$('#personlist').val("10");
}
回答by Frank M
If you are adding the option with javascript
如果您使用 javascript 添加选项
function AddNewOption(userRoutes, text, id)
{
var option = document.createElement("option");
option.text = text;
option.value = id;
option.selected = "selected";
userdRoutes.add(option);
}
回答by Rachana
An array Index will start from 0. If you want value=11 (Person1), you will get it with position getElementsByTagName('option')[10].selected.
数组索引将从 0 开始。如果你想要 value=11 (Person1)，你会得到它的 position getElementsByTagName('option')[10].selected。
回答by Tariqul Islam
It's an old post, but if anyone is still looking for solution to this kind of problem, here is what I came up with:
这是一篇旧帖子，但如果有人仍在寻找此类问题的解决方案，那么我想出了以下内容：
<script>
document.addEventListener("DOMContentLoaded", function(e) {
document.forms['AddAndEdit'].elements['list'].value = 11;
});
</script>
