使用 javascript 在下拉列表中显示选项的键和值

Displaying key and values of the options in a dropdown using javascript

本文关键字：选项 键和值 显示 javascript 下拉列表 使用      更新时间：2023-09-26

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

你想做的事情是不可能的（使用原生<select>）。您在已关闭<select>中看到的项目只是当前选定的<option>。当您打开下拉菜单时，您会在两个地方看到相同的<option> - 在"选择"和"列表"中。当它是相同的<option>时，您无法在每个位置看到不同的值。

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

这不是

一个完美的答案。但是可能的解决方法..

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>

相关文章：