1

我有一个带有多个输入文本的动态表单。在某些输入上，我有数据列表将它们同步在一起：当我在 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（它永远不会在输入中）......

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

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

谢谢 ！

4

1 回答 1

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

检查演示小提琴

于 2018-06-27T14:05:01.040 回答