时间戳

首页 > 解决方案 > HTML选择下拉列表如何显示VALUE/ID而不是文本

javascript - HTML选择下拉列表如何显示VALUE/ID而不是文本

问题描述

这是 HTML 代码：

<select id='selUser' style='width: 200px;'>
  <option value='0'>Select User</option> 
  <option value='1'>Yogesh singh</option> 
  <option value='2'>Sonarika Bhadoria</option> 
  <option value='3'>Anil Singh</option> 
  <option value='4'>Vishal Sahu</option> 
  <option value='5'>Mayank Patidar</option> 
  <option value='6'>Vijay Mourya</option> 
  <option value='7'>Rakesh sahu</option> 
</select>

我想要实现的是，当我单击值“1”时，下拉列表将显示“1”而不是 Yogesh Singh。有可能这样做吗？

标签： javascripthtmlselectdrop-down-menu

解决方案

当您选择一个选项时，这将显示值而不是名称。如果您再次更改名称，我还编写了一些代码将名称放回原处，否则数字将留在那里添加了两个示例：

var oldIndex = ''
var oldText = ''

function change(x) {
  if (oldIndex != '' && oldText != '') {
    x.options[oldIndex].innerHTML = oldText
  }
  oldIndex = x.value
  oldText = x.options[x.selectedIndex].innerHTML
  x.options[x.selectedIndex].innerHTML = x.value
}

function change2(x) {
  x.options[x.selectedIndex].innerHTML = x.value
}
<select onchange="change(this)" id='selUser' style='width: 200px;'>
  <option value='0'>Select User</option>
  <option value='1'>Yogesh singh</option>
  <option value='2'>Sonarika Bhadoria</option>
  <option value='3'>Anil Singh</option>
  <option value='4'>Vishal Sahu</option>
  <option value='5'>Mayank Patidar</option>
  <option value='6'>Vijay Mourya</option>
  <option value='7'>Rakesh sahu</option>
</select>

<select onchange="change2(this)" id='selUser2' style='width: 200px;'>
  <option value='0'>Select User</option>
  <option value='1'>Yogesh singh</option>
  <option value='2'>Sonarika Bhadoria</option>
  <option value='3'>Anil Singh</option>
  <option value='4'>Vishal Sahu</option>
  <option value='5'>Mayank Patidar</option>
  <option value='6'>Vijay Mourya</option>
  <option value='7'>Rakesh sahu</option>
</select>

推荐阅读