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();