有重复选项时如何检测数据列表中的选定选项？

Question

我有一个带有包含重复选项值的数据列表的输入类型文本

<input type="text" id="my-input" list="data-list">
<datalist id="data-list">
   <option value="John" data-id="1"></option>
   <option value="George" data-id="2"></option>
   <option value="John" data-id="3"></option>
</datalist>

当我 select 选项时，我必须获得 data-id 什么选项。例如，如果我 select 第二个 John 得到 3 作为 id。我刚发现这个：

$("#data-list option[value='" + $('#my-input').val() + "']").attr('data-id');

但是如果我选择了第二个 john，它 returns 1 作为 id，whitch 是不正确的。

Answer 1

您可以在 datalist 中添加一个索引到复制选项。因此，您应该遍历选项并在循环 select 中 datalist 中的任何选项具有相同的 value 并将索引添加到它的 value 属性。

$("datalist option").each(function(){
  var sameOpt = $(this).parent().find("[value='"+this.value+"']:gt(0)");
  sameOpt.val(function(i, val){
    return val+'-'+(sameOpt.index(this)+2);
  }); 
});

$("datalist option").each(function(){
  var sameOpt = $(this).parent().find("[value='"+this.value+"']:gt(0)");
  sameOpt.val(function(i, val){
    return val+'-'+(sameOpt.index(this)+2);
  }); 
});

$("#my-input").change(function(){
  var v = $("#data-list option[value='"+this.value+"']").attr('data-id');
  console.log(v);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="my-input" list="data-list">
<datalist id="data-list">
  <option value="John" data-id="1"></option>
  <option value="George" data-id="2"></option>
  <option value="John" data-id="3"></option>
  <option value="George" data-id="4"></option>
  <option value="John" data-id="5"></option>
</datalist>

Answer 2

我认为这对你的情况来说是错误的。如果您希望用户选择一个项目，您应该尝试使用 select 元素。有很多可用的解决方案。

话虽如此，您可以为名称使用 label 属性，并在 value:

中使用明确的值

<option label="John" value="1"></option>
<option label="George" value="2"></option>
<option label="John" value="3"></option>

这会为用户显示所有选项，但他们在选择 John 后看到的实际值将是 1 或 3，而不是 John。

有重复选项时如何检测数据列表中的选定选项？

How to detect selected option in datalist when has duplicate option?

html

javascript

jquery

html-datalist