Search code examples
javascriptjqueryhtmldropdown

Select-List displays Keys instead of values

I have a stange phenomenon where I'm stuck at the moment as I don't know where the error comes from.

My code is like this:

<input id="selectClassInput" name="selectClass" list="selectClass" type="text" >
<datalist id="selectClass">
   <option value="DUMMY1">0</option>
   <option value="s">24</option>
   <option value="d">25</option>
</datalist>

My problem is with displaying the datalist. If I click on the arrow I'm getting only the numbers like here: enter image description here

After selecting for example '25' I'm getting the value 'd'. That is correct BUT I don't want to display the numbers. Instead I want to display the value of this datalist in this drop-down field.

If I do something like this: 

<input id="selectClassInput" name="selectClass" list="selectClass" type="text" >
<datalist id="selectClass">
    <option value="DUMMY1">DUMMY1</option>
    <option value="s">s</option>
    <option value="d">d</option>
 </datalist>

I'd naturally get the correct display, but I would like to add the ID, so that I can bind the click event with the ID of the selection and not the label.

Solution

  • You can make use of data attribute to find the id of option clicked from the list and keep value as labels,

    see below code 

    $(function(){
  $('#selectClassInput').on('change', function(e){
     var val = $(this).val();
     var id = $('#selectClass').find('option[value="' + val + '"]').data('id');
     console.log(id);
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input id="selectClassInput" name="selectClass" list="selectClass" type="text" >
<datalist id="selectClass">
   <option value="DUMMY1" data-id="0">DUMMY1</option>
   <option value="s"  data-id="24">s</option>
   <option value="d" data-id="25">d</option>
</datalist>