複数のエントリが同じ値を共有する場合、選択したデータリストエントリからデータ属性を取り出す方法は？

Question

私は、ユーザーが次のように選択できることをデータリストがあります：私は「DATA_ID」という名前のデータ属性を保持するために、隠し入力フィールドを持つ

<input list="user_names" id="names" name="user_name" /> 
<datalist id="user_names"> 
<option value="bob" data_id="bob_10">10</option> 
<option value="bob" data_id="bob_5">5</option> 
<option value="james" data_id="james_7>7</option> 
</datalist> 

を：

<input type="hidden" name="user_id" id="user_id" value="" /> 

を私がjQueryのを使用していますユーザーが選択したものからdata_id値を移入します。

jQuery(document).ready(function($){ 
$('#names').on('input, function(){ 
    var value = $(this).val(); 
    var user_id = $('#user_names [value="' + value + '"]').data('id'); 
    document.getElementById('user_id').value = user_id; 
}) 
}); 

これは、2つのデータリストのオプションが同じ値を共有するが（二つの「ボブ」のエントリで実証）は、同じデータID、jQueryの代わりに最初のオプションのデータIDをピックアップしない場合を除いて、正常に動作し選択されたもの。 jQueryが各オプションに関連付けられたテキストによって選択したものをさらにフィルタリングする方法はありますか？

Answer 1

データリストが

1. データリストをどのように動作するかの基本的な考え方は、それを参照する任意の入力に移入されます。
2. リストからオプションを選択すると、入力ボックスにの値属性のみが転送されます。

あなたのジレンマ

あなたはそれがどこから来たデータリストを検索し、そこに保存されているすべてのデータを回復するためにinput要素の新しい値を使用することができます。この手法を使用すると、入力からの値を使用してデータリストを検索していることを意味します。

同じ値のアイテムが複数ある場合は、どちらを使用するかわからなくなります。あなたのジレンマ。現時点ではこの問題を回避する方法はありません

結論

。したがって、データリストで一意の値を使用する必要があります。とにかくユーザーが同じ値を選択させる理由はありません。

ソース

1. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
2. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option

PS：追記オン：あなたはオプションの要素やラベルプロパティ内のテキストを使用したくない場合があります。それは異なるブラウザが異なるそれらを扱うようです。ブラウザー間で矛盾が生じるうまくいけば、それは今後数年間に整理されるだろう。