Come cambio un'opzione HTML selezionata usando JavaScript?

Question

devo menu delle opzioni in questo modo:

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

E ora voglio cambiare l'opzione selezionata utilizzando un href. Per esempio:

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

Ma voglio selezionare l'opzione con value=11 (Person1), non Person12.

Come cambio questo codice?

Answer 1

Change

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

a

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

Answer 2

Un array Indice inizia da 0. Se si desidera value = 11 (Person1), lo otterrete con la posizione getElementsByTagName('option')[10].selected.

Answer 3

Credo che il post del blog JavaScript Beginners – Select a dropdown option by value potrebbe aiutarti.

<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

Ecco tutti gli strumenti come puro codice JavaScript per la gestione selectbox:

Fiddler DEMO

codice 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

Si potrebbe anche cambiare select.options .selectedIndex Attributo DOM come questo:

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

Basta fare mySelect.value = myValue dove myValue è uguale l'attributo valore dell'opzione che si desidera impostarla.