Wie ändere ich eine ausgewählte HTML-Option mit JavaScript?

Question

Ich habe Optionsmenü wie folgt aus:

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

Und nun möchte ich unter Verwendung eines href die gewählte Option ändern. Zum Beispiel:

<a href="javascript:void(0);" 
    onclick="document.getElementById('personlist').getElementsByTagName('option')[11].selected = 'selected';">change</a> 

Aber ich mag die Möglichkeit, mit value=11 (Person1) wählen, nicht Person12.

Wie kann ich diesen Code ändern?

Answer 1

ändern

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

zu

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

Answer 2

Ein Array-Index wird von 0 beginnen Wenn Sie Wert wollen = 11 (Person1), können Sie es mit der Position getElementsByTagName('option')[10].selected zu bekommen.

Answer 3

Ich glaube, dass der Blog-Beitrag JavaScript Beginners – Select a dropdown option by value Ihnen helfen kann.

<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

Hier sind alle Werkzeuge als reine JavaScript-Code für den Umgang mit Auswahlbox:

Fiddler DEMO

JavaScript-Code:

/** 
* 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

Sie auch select.options ändern könnte .selectedIndex DOM Attribut wie folgt:

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

Just do mySelect.value = myValue wo myValue den Wert Attribut der Option gleich Sie es festlegen möchten.