我有一个带有数据列表的输入类型文本,其中包含重复的选项值
<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,则错误是不正确的。
答案 0 :(得分: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>
答案 1 :(得分:0)
我认为这只是您案件的错误内容。如果希望用户选择项目,则应尝试使用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。