Проблема при попытке синхронизировать несколько входов с идентификатором списка данных - PullRequest
Новая
       9

Проблема при попытке синхронизировать несколько входов с идентификатором списка данных

0 голосов
/ 27 июня 2018

У меня есть динамическая форма с несколькими ввода текста. На некоторых входах у меня есть списки данных, чтобы синхронизировать их вместе: когда я выбираю значение в 1 входе, для других устанавливается соответствующее значение.

Это прекрасно работает, когда все параметры в списках данных уникальны. Однако, когда у меня есть несколько вариантов с одинаковым значением (но с другим идентификатором), я не получаю правильный ... Я получаю только первый вариант.

Вот фрагмент, объясняющий мою проблему. 

$("#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>

Я не могу использовать содержимое параметра для получения идентификатора списка данных (он никогда не будет на входе) ...

Я не могу использовать «выбрать» вместо списка данных ... Пользователи должны иметь возможность добавлять информацию

У кого-нибудь есть решение или идея?

Спасибо!

1 Ответ

0 голосов
/ 27 июня 2018

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

Чек Демонстрационная скрипка

...