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

我有n个下拉列表值。 当我选择一个值时，应显示相应的键。 下拉列表应为值，显示项目应为核心键。

已将图像作为参考。

我的代码：

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

您要尝试执行的操作是不可能的（使用本机<select> ）。 您在闭合的<select>看到的项目只是当前选择的<option> 。 当打开下拉列表时，您会在两个位置（“选择”和“列表”中）看到相同的<option> 。 当相同的<option>时，您无法在每个位置看到不同的值。

但是，您可以在其他地方显示所选的值 ，例如，在<select>旁边的第二个元素中。

Answer 2

这不是一个完美的答案。但是可以解决。

 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>