如何使用JavaScript更改HTML選擇的選項？

Question

我有這樣的選項菜單：

<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選項。

如何更改此代碼？

Answer 1

變化

document.getElementById('personlist').getElementsByTagName('option')[11].selected = 'selected' 

到

document.getElementById('personlist').value=Person_ID; 

Answer 2

數組索引將從0。如果要啓動值= 11（PERSON1），你會getElementsByTagName('option')[10].selected位置得到它。

Answer 3

我相信博客文章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; 
    } 
    } 
} 

Answer 4

這裏有所有的工具，用於處理選擇框純JavaScript代碼：

Fiddler DEMO

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; 
} 

Answer 5

你也可以改變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>

Answer 6

mySelect.value = myValue

只是做mySelect.value = myValue其中myvalue的與您要設置的選項的值屬性。