javascript - HTML の Datalist で選択した項目を検索

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に追加しています。ここでの問題は、データリストでユーザーが選択/クリックしたオプションをどのように見つけることができるかです。ユーザーが選択/クリックするとすぐにオプションのIDを取得したいですか?

Answer 1

この方法を試してください

<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

これを試してみてください。「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

is(':selected') で確認できます

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

または、選択したオプション値を取得するには

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