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（永远不会出现在输入中）...

我不能使用“选择”代替数据列表...用户必须能够添加信息

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

谢谢！

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

1 个答案: