Найти выбранный элемент в Datalist в HTML

Question

У меня есть что-то вроде этого

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

Я добавляю "вариант", используя jquery для datalist. Теперь вопрос в том, как я могу найти, какая опция выбрана / нажата пользователем в списке данных. Я хочу получить идентификатор опции, как только она будет выбрана / нажата пользователем?

Answer 1

Вы можете добавить идентификатор в поле ввода - и прослушать событие ввода. Затем вы должны получить значение ввода, которое будет использоваться в селекторе, чтобы получить выбранную опцию.

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

Попробуй так

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

Попробуйте это, я получил значение "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 4

Вы можете проверить это с помощью is(':selected')

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

Или получить значение выбранного параметра

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