如果有重复选项,如何检测datalist中的选定选项？

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

但是,如果我选择了第二个约翰,它将返回1为id,whitch是不正确的.

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

$("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);
})