Find selected item in Datalist in HTML

Question

I've a datalist something like this

<input list="browsers">

<datalist id="browsers">
  <option id="op1" value="Internet Explorer">
  <option id="op2" value="Firefox">
  <option id="op3" value="Chrome">
  <option id="op4" value="Opera">
  <option id="op5" value="Safari">
</datalist>

I'm adding "option" using jquery to datalist. Now the question is how can i find which option is selected/clicked by the user in datalist. I want to get the id of option as soon as it is is selected/clicked by user?

Answer 1

You can add an ID to the input field - and listen for the input event. Then you have to get the value of the input to use in the selector to get the selected option

$(function() {
  $('#browserinput').on('input',function() {
    var opt = $('option[value="'+$(this).val()+'"]');
    alert(opt.length ? opt.attr('id') : 'NO OPTION');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id='browserinput' list="browsers">

<datalist id="browsers">
  <option id="op1" value="Internet Explorer" />
  <option id="op2" value="Firefox" />
  <option id="op3" value="Chrome" />
  <option id="op4" value="Opera" />
  <option id="op5" value="Safari" />
</datalist>

Answer 2

Try this way

<input list="browsers" id="input">

<datalist id="browsers">
  <option id="op1" value="Internet Explorer">
  <option id="op2" value="Firefox">
  <option id="op3" value="Chrome">
  <option id="op4" value="Opera">
  <option id="op5" value="Safari">
</datalist>

$(function(){
    $('#input').change(function(){
        console.log($("#browsers option[value='" + $('#input').val() + "']").attr('id'));
    });
});

http://jsfiddle.net/smap06ro/45/