How do I change an HTML selected option using JavaScript? How do I change an HTML selected option using JavaScript? javascript javascript

How do I change an HTML selected option using JavaScript?


Change

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

to

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


Tools as pure JavaScript code for handling Selectbox:

Graphical Understanding:

Image - A

enter image description here


Image - B

enter image description here


Image - C

enter image description here

Updated - 25-June-2019 | 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;}


I believe that the blog post JavaScript Beginners – Select a dropdown option by value might help you.

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