JQueryまたはJavaScriptを使用してデータリスト内の選択されたオプションのカスタム属性を見つける方法

Question

jQueryの使用データリストのval()にアクセスできますが、選択したオプションのinnerHTML（html()）にアクセスします。私は次のコードを使用しているとき、それは動作していません。私の価値観を見つけるにはどうすればいいですか？

$("input[name=browsers]").on('change', function() { 
 
    alert($(this).html()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input list="browsers" name="browsers" /> 
 
<datalist id="browsers"> 
 
    <option value="IE">5</option> 
 
    <option value="Firefox">6</option> 
 
    <option value="Chrome">7</option> 
 
    <option value="Opera">8</option> 
 
    <option value="Safari">9</option> 
 
</datalist>

Answer 1

あなたは自分の入力の値を警告ではなく、あなたの選択したオプションのhtmlされています。

optionを得るために、あなたの入力の値を使用してそれを取得してから、このようなセレクタを修正することができます：

$("input[name=browsers]").on('change', function(){ 
 
    var inputVal = $(this).val(); 
 
    var optionHTML = $("#browsers option[value='"+inputVal+"']").html(); 
 
    alert(optionHTML); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input list="browsers" name="browsers" /> 
 
<datalist id="browsers"> 
 
    <option value="IE">5</option> 
 
    <option value="Firefox">6</option> 
 
    <option value="Chrome">7</option> 
 
    <option value="Opera">8</option> 
 
    <option value="Safari">9</option> 
 
</datalist>