尝试使用 datalist id 同步多个输入时出现问题

Question

我有一个包含多个输入文本的动态表单。在某些输入上，我有数据列表将它们同步在一起：当我在 1 个输入中选择一个值时，其他输入具有相关的值集。

当数据列表中的所有选项都是唯一的时，这非常有效。但是，当我有多个具有相同值（但 ID 不同）的选项时，我没有得到正确的选项……我只得到第一个选项。

这里有一个解释我的问题的 sn-p。

$("#input1").on("change blur", function() {
	let id = $("#datalist1").find("option[value='"+$(this).val()+"']").attr('id')
  if (id) {
    $("#input2").val($("#datalist2").find("#"+id).val())
    $("#idInput1").html(id)
    $("#idInput2").html('')
  }
})

$("#input2").on("change blur", function() {
	let id = $("#datalist2").find("option[value='"+$(this).val()+"']").attr('id')
  if (id) {
    $("#input1").val($("#datalist1").find("#"+id).val())
    $("#idInput2").html(id)
    $("#idInput1").html('')
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" list="datalist1" id="input1"/>
<datalist id="datalist1">
  <option id="1" value="Option1">Option1-1</option>
  <option id="2" value="Option2">Option2</option>
  <option id="3" value="Option1">Option1-2</option>
</datalist>
<div id="idInput1"></div>

<input type="text" list="datalist2" id="input2"/>
<datalist id="datalist2">
  <option id="1" value="Test1">Test1</option>
  <option id="2" value="Test2">Test2</option>
  <option id="3" value="Test3">Test3</option>
</datalist>
<div id="idInput2"></div>

我无法使用选项内容来获取数据列表 ID（它永远不会在输入中）...

我不能用“select”代替datalist...用户必须能够添加信息

有人有解决方案或想法吗？

谢谢！

Answer 1

datalist 不支持事件 您可以通过下拉列表和监听选定的特定值来获得相同的结果。

<select class="form-control bordered" id="dd_list">
    <option></option>
    <option value="val1" > Value 1</option>
    <option value="val2" > Value 2</option>
    <option value="val3" > Value 3</option>
    <option value="val4" > Value 4</option>
    <option value="val5" > Value 5</option>
    <option value='other'> Other</option>
</select>
<input type="text" id="dd_list_other" class="form-control bordered" title="Press Escape to show DD" placeholder="Enter value or press ESC" style="display: none" />

还有JS代码

$('#dd_list').on('change', function(){
    var v = $(this).val();
    if( v == "other" ){
        $(this).hide();
        $('#dd_list_other').show();
        $('#dd_list_other').focus();
    }
});

$('#dd_list_other').on('keydown', function(e){
    if(e.which == 27){ // ESC keycode
        $(this).val('');
        $(this).hide();
        $('#dd_list').show();
    }
});

查看Demo Fiddle