HTML select下拉列表如何显示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>

我想要实现的是，当我点击Value'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> 

Answer 2

这个脚本会这样做：

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

Answer 3

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