javascript - Why does the id of the datalist option return empty value? -

i've been stuck on datalist hours , can't figure out why returns empty when alerting selected object (4000 islands, laos example). want return 'id' attribute of selected option in list.

jquery:

$k2 = jquery.noconflict(); $k2('#submit').on('click',function(){ var g=$k2('#to-selected').val();   var id = $k2('#to').find('option').attr('id'); alert(id); return false; }); 

html:

<td>   <input autofocus="" type="text" list="to" id="to-selected" style="width: 145px;">   <datalist id="to">  <option id="" value="all"></option> <option value="4000 islands, laos" id="4483"></option> </datalist>  </td> <button id="submit">test</button> 

i have feeling has 'all' option after removal works fine. appreciated! jsfiddle can found here. http://jsfiddle.net/x7oa7wk4/1/

thanks guys!

you need find option selected using value of input element

$k2 = jquery.noconflict(); $k2('#submit').on('click', function () {     var g = $k2('#to-selected').val();     var id = $k2('#to').find('option[value="' + g + '"]').attr('id');     alert(id);     return false; }); 

demo: fiddle