如何更改HTMLselect使用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>
但是我想selectvalue=11 (Person1)而不是Person12 。
如何更改此代码？
好吧，没关系:)正确的答案是：
更改
document.getElementById('personlist').getElementsByTagName('option')[11].selected = 'selected'
至
document.getElementById('personlist').value=Person_ID;
我相信下面的链接可能会帮助你。
http://www.imranulhoque.com/javascript/javascript-beginners-select-a-dropdown-option-by-value/
<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; } } }
以下是处理Selectbox的所有工具，如纯Java脚本代码：
小提琴演示
Java脚本代码：
/** * 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; }
你也可以像这样改变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开始…如果你想要值= 11（Person1）..你会得到位置getElementsByTagName（'option'）[10] .selected
mySelect.value = myValue
只是做mySelect.value = myValue其中myValue等于您要设置它的选项的值属性。
