如何在存在重复选项的数据列表中检测所选选项？

Question

我有一个包含重复选项值的datalist输入框。

<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，这是不正确的。

- andrei bozdoro

---

你在input或datalist上有任何事件处理程序吗？ - maazadeeb

有趣，但我有一种感觉，可能不可能 https://dev59.com/S10a5IYBdhLWcg3wt6qK 也许你所能做的就是在它改变后检查“value”，这并不足以确定点击了哪个“option” - CertainPerformance

我在输入字段上有一个onchange事件。我有一种感觉你是对的（这是不可能的），但是对于一个带有选项并且可以接受新值的输入，我有什么选择呢？ - andrei bozdoro

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

- Mohammad

---

我可以问一下为什么要将2添加到索引而不仅仅使用索引吗？在(sameOpt.index(this)+2)中。 - CertainPerformance

@CertainPerformance .index() 返回的数字是从 0 开始的，但我需要从 2 开始。 - Mohammad

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。

- Hugo Silva