如何更改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等于您要设置它的选项的值属性。