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

【问题标题】：HTML select dropdownlist how to display the VALUE/ID instead of textHTML选择下拉列表如何显示VALUE/ID而不是文本
【发布时间】：2018-11-11 19:39:44
【问题描述】：

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

【问题讨论】：

因此，如果我们显示 1，您是否希望在单击下拉菜单以选择其他选项或显示为 1 时看到“Yogesh singh”选项？
https://stackoverflow.com/questions/1643227/get-selected-text-from-a-drop-down-list-select-box-using-jquery

标签： javascript html select drop-down-menu

【解决方案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>

【讨论】：

我喜欢第一个选择元素在选择不同选项时显示原始值的方式。非常好:)
我先有第二个，但不认为这是他们想要的。谢谢
如果我们再次更改值，它不会再次显示文本
无论您更改多少次，第一个下拉菜单都会将文本设置回原来的样子？你在问什么？

【解决方案2】：

使用 jQuery 的解决方案：

var last_user_selected_name;

$(document).on('change', '#selUser', function() {
    $('#selUser option:not(:selected)').each(function() {
      if ($(this).text() === $(this).val()) {
        $(this).text(last_user_selected_name);
      }
    });

   var user_seleted = $('#selUser option:selected');

   if (user_seleted.val() != 0) {
       last_user_selected_name = user_seleted.text();
       user_seleted.text(user_seleted.val());
       console.log("User selected >> " + last_user_selected_name + 
                                " >> " + user_seleted.val());
   }
});

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<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>

【讨论】：

【解决方案3】：

这个脚本可以做到：

document.body.onload = function(){
    sel = document.getElementById('selUser');
    opts = sel.childNodes;
    for(var i in opts){
        opts[i].innerHTML = opts[i].value;
    }
}

【讨论】：