HTML select dropdownlist how to display the VALUE/ID instead of text

Question

So this is the HTML code:

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

What I want to achieve is that, when I click on Value '1', the dropdownlist will display "1" instead of Yogesh Singh. Is it possible to do that?

So if we display 1 would you expect to see the option "Yogesh singh" to be present when you click the drop down to select a different option or show it be displayed as 1? — slee423, Jun 01 '18 at 16:10
[https://stackoverflow.com/questions/1643227/get-selected-text-from-a-drop-down-list-select-box-using-jquery](https://stackoverflow.com/questions/1643227/get-selected-text-from-a-drop-down-list-select-box-using-jquery) — developerKumar, Jun 01 '18 at 16:12

score 5 · Accepted Answer · edited Aug 02 '18 at 07:57

This will display the value instead of the name when you select an option. I also wrote some code to put the name back if you change it again otherwise the number would just stay there added both examples:

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>

I like how the first select element displays the original value when a different option is selected. Very nice :) — slee423, Jun 01 '18 at 16:12
I had the second one first but don't think that is what they are wanting. Thanks — Scath, Jun 01 '18 at 16:13
what if we change value again , its it not showing text again — Afsar, Jun 01 '18 at 16:18
The first drop down will set the text back to what it was no matter how many times you change it? What are you asking? — Scath, Jun 01 '18 at 16:26

score 2 · Answer 2 · answered Jun 01 '18 at 16:23

2

This script would do it:

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

answered Jun 01 '18 at 16:23

Juan Francisco Carías Álvarez

111
1
1
4

ℛɑƒæĿᴿᴹᴿ · Answer 3 · 2018-06-01T18:49:07.343

Solution using 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>

HTML select dropdownlist how to display the VALUE/ID instead of text

3 Answers3