![](/img/trans.png)
[英]How do I change the “selected” attribute on an option tag with javascript
[英]How do I change an HTML selected option using JavaScript?
我有這樣的選項菜單:
<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>
現在我想通過使用 href 來更改選定的選項。 例如:
<a href="javascript:void(0);"
onclick="document.getElementById('personlist').getElementsByTagName('option')[11].selected = 'selected';">change</a>
但我想選擇value=11 (Person1)
的選項,而不是Person12
。
如何更改此代碼?
改變
document.getElementById('personlist').getElementsByTagName('option')[11].selected = 'selected'
到
document.getElementById('personlist').value=Person_ID;
作為處理 Selectbox 的純 JavaScript 代碼的工具:
圖形理解:
圖像-A
圖像-B
圖像-C
更新 - 2019 年 6 月 25 日 | 提琴手演示
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;
}
mySelect.value = myValue;
其中mySelect
是您的選擇框,而myValue
是您要將其更改為的值。
我相信博客文章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;
}
}
}
您還可以像這樣更改 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>
從技術上講,您自己的答案並沒有錯,但是您弄錯了索引,因為索引從 0 開始,而不是 1。這就是您選擇錯誤的原因。
document.getElementById('personlist').getElementsByTagName('option')[**10**].selected = 'selected';
此外,對於標簽不完全是英文或數字的情況,您的答案實際上是一個很好的答案。
例如,如果他們使用亞洲字符,則告訴您使用 .value() 的其他解決方案可能並不總是起作用,並且不會做任何事情。 按標簽選擇是忽略實際文本並按元素本身選擇的好方法。
你也可以使用 JQuery
$(document).ready(function () {
$('#personlist').val("10");
}
如果您使用 javascript 添加選項
function AddNewOption(userRoutes, text, id)
{
var option = document.createElement("option");
option.text = text;
option.value = id;
option.selected = "selected";
userdRoutes.add(option);
}
一個數組索引將從 0 開始。如果你想要 value=11 (Person1),你會得到它的位置getElementsByTagName('option')[10].selected
。
這是一個舊帖子,但如果有人仍在尋找此類問題的解決方案,這就是我想出的:
<script>
document.addEventListener("DOMContentLoaded", function(e) {
document.forms['AddAndEdit'].elements['list'].value = 11;
});
</script>
注意:選項索引計數從 0 開始。這意味着第一個選項將被索引為 0。
document.querySelector(".add__btn").addEventListener("click", function(){ var index = 1; /*change option value here*/ document.querySelector(".add__type").options.selectedIndex = index; document.querySelector(".add__description").value = "Option Index"; document.querySelector(".add__value").value = index; });
<html> <div class="add__container"> <select class="add__type"> <option value="inc" selected>+</option> <option value="exp">-</option> </select> <input type="text" class="add__description" placeholder="Add description"> <input type="number" class="add__value" placeholder="Value"> <button class="add__btn"> Submit </button> </div> <h4> Default Option Value will be selected after pressing Submit </h4>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.