使用JavaScript在下拉菜单中显示选项的键和值

Question

 function keyy(id) { var value; var selected; var select = document.getElementById(id); if(value != null) select.options[selected].text = value; selected = select.selectedIndex; var key; key =select.options[selected].value; value= select.options[selected].text; select.options[selected].innerHTML = key; } 

 <select id="Carss" name="Cars" onchange="keyy(this.id)" > <option value="A">Audi</option> <option value="M">Mercedes</option> </select> 

I have n dropdown values. When I select one value, the corresponding key should be displayed. The drop down should be the values and the display item shoud be the coresponding key.

Have atached the image for the reference.

My code :

var value;
var selected;
function keyy(id) {
     var select = document.getElementById(id);
     if(value != null)
         select.options[selected].text = value; 
     selected = select.selectedIndex;
     var key;
     key =select.options[selected].value;
     value= select.options[selected].text;
     select.options[selected].text = key; 
}

Answer 1

What you're trying to do is impossible (with a native <select> ). The item you see in the closed <select> is simply the <option> that is currently selected. When you open the drop-down, you see the same <option> in two places - in the "selection" and in the "list". You cannot see a different value in each of the places, when it's the same <option> .

You could, however, show the selected value somewhere else, eg in a second element next to the <select> .

Answer 2

This is not a perfect answer.. But a possible work around..

 function key() { document.getElementById("Carss").style.width = "100px" } function key2() { document.getElementById("Carss").style.width = "34px" document.getElementById("Carss").blur(); } 

 <select id="Carss" name="Cars" onfocus="key()" onchange="key2()" style="width:34px"> <option value="A">Audi</option> <option value="M">Mercedes</option> </select>