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

【问题标题】：How to detect selected option in datalist when has duplicate option?有重复选项时如何检测数据列表中的选定选项？
【发布时间】：2018-11-26 02:36:52
【问题描述】：

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

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

当我选择选项时，我必须获得data-id 的哪些选项。例如，如果我选择第二个 John 以获取 3 作为 id。我刚刚发现了这个：

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

但如果我选择第二个 john，它会返回 1 作为 id，whitch 不正确。

【问题讨论】：

input 或 datalist 上是否有任何事件处理程序？
有趣，但我有一种感觉，这可能是不可能的stackoverflow.com/questions/30022728/… 也许你所能做的就是在它改变之后检查value，这不足以确定哪个 option 被点击
我在输入字段上有 onchange。我觉得你是对的（这是不可能的），但是我有什么选项可以输入选项并且可以接受新值？

标签： javascript jquery html html-datalist

【解决方案1】：

您可以在datalist 中添加索引以复制选项。因此，您应该遍历选项并在循环中选择 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>

【讨论】：

能问下索引加2的目的，而不是只用索引吗？在(sameOpt.index(this)+2)
@CertainPerformance .index() 从0 返回号码，但我需要来自2

【解决方案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。

【讨论】：