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>

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

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

但是，如果我选择第二个约翰，它将返回1作为id，则错误是不正确的。

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>

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。

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

2 个答案: