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

Question

所以这是 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。有可能这样做吗？

Answer 1

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

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>