当多个条目共享相同的值时，如何从选定的数据列表条目中检索数据属性？

Question

我有一个数据列表供用户选择，如下所示：

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

我有一个隐藏的输入字段来保存名为“data_id”的数据属性：

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

这很好用，除非两个 datalist 选项共享相同的值但不同的 data-id（用两个“bob”条目演示），jQuery 选择第一个选项的 data-id 而不是原来的那个选择。有没有办法可以通过与每个选项关联的文本进一步过滤 jQuery 选择的内容？

Answer 1

数据列表工作原理的基本概念

1. datalist 会填充引用它的任何输入。
2. 从列表中选择一个选项仅将值属性传输到输入框。

你的困境

您可以使用输入元素的新值来搜索它来自的数据列表并恢复存储在那里的任何数据。当使用此技术时，这意味着您正在使用输入中的值来搜索数据列表。

如果有多个具有相同值的项目，您将无法知道您想要哪一个。因此你的困境。

结论

目前没有办法解决这个问题。因此，您将不得不在数据列表中使用唯一值。如果您考虑一下，无论如何您都没有任何理由让用户在相同的值之间进行选择。

来源

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：附带说明：您可能不想在选项元素或标签属性中使用文本。似乎不同的浏览器对待它们不同。导致跨浏览器的不一致。希望这将在未来几年得到解决。