尝试将多个输入与数据列表 ID 同步时出现问题

Question

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

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

这里是解释我的问题的片段。

$("#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" 而不是数据列表...用户必须能够添加信息

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

谢谢！

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

尝试将多个输入与数据列表 ID 同步时出现问题

Issue when trying to sync multiple input with datalist id

javascript

html

datalist