javascript - Encuentra el elemento seleccionado en Datalist en HTML

jquery html5

Question

Tengo un datalista algo como esto

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

Estoy agregando "opción" usando jquery a datalist. Ahora la pregunta es cómo puedo encontrar qué opción está seleccionada / clic en el usuario en datalist. ¿Quiero obtener la identificación de la opción tan pronto como el usuario la seleccione / haga clic?

Answer 1

Intenta de esta manera

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

Answer 2

Intente esto, obtuve el valor ''data-id''.

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

<script type="text/javascript">
$(function(){
    $(''#input'').change(function(){
        var abc = $("#browsers option[value=''" + $(''#input'').val() + "'']").attr(''data-id'');
        alert(abc);
    });
});
</script>

//if you click/choose ''Firefox'' then ''op2'' will show

Answer 3

Puede agregar una ID al campo de entrada y escuchar el evento de entrada. Luego debe obtener el valor de la entrada para usar en el selector para obtener la opción seleccionada

$(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 4

Puede verificar eso con is ('': selected'')

$(''#browsers option'').each(function() {
    if($(this).is('':selected'')){
     // Your code here with the selected value
   }
});

O para obtener el valor de la opción seleccionada

 $(''#browsers'').val();