Установка значений параметра скрытого каталога данных

В нижеприведенном фрагменте у меня есть два метода для выбора элемента: ввод с datalist и традиционный выбор с параметрами.

Элемент select сохраняет значения параметров скрытыми, и мы все еще можем получить его с помощью this.value. Однако с помощью datalist значение действительно отображается, а текстовое содержимое опции отображается как вторичная метка.

Я хотел бы, чтобы подход ввода + datalist вел себя как традиционный выбор, где "Foo" и "Bar" отображаются как опции, которые при выборе имеют значения "1" и "2" соответственно.

Я также добавил повторное имя "Foo" со значением "3". Это должно показать, что любое решение не должно зависеть от уникальных опций.

<input list="options" onchange="console.log(this.value)"/>
<datalist id="options">
  <option value="1">Foo</option>
  <option value="2">Bar</option>
  <option value="3">Foo</option>
</datalist>

<select onchange="console.log(this.value)">
  <option value=""></option>
  <option value="1">Foo</option>
  <option value="2">Bar</option>
  <option value="3">Foo</option>
</select>

ОТВЕТЫ

Ответ 1

Нет никакого родного пути. Для текстовых входов

input элемент represents a редактирование текста в одной строке управление элементом value.

Таким образом, невозможно сделать текстовый ввод, отображающий текст, отличный от его значения.

Вы можете захватить геттер value в HTMLInputElement.prototype, но я не рекомендую его, и я не вижу способа узнать, какой вариант был выбран, если значения не уникальны.

var des = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
Object.defineProperty(HTMLInputElement.prototype, 'value', { get: function() {
  if(this.type === 'text' && this.list) {
    var value = des.get.call(this);
    var opt = [].find.call(this.list.options, function(option) {
      return option.value === value;
    });
    return opt ? opt.dataset.value : value;
  }
}});
<input list="options" oninput="console.log(this.value);" />
<datalist id="options">
  <option data-value="1">Foo</option>
  <option data-value="2">Bar</option>
  <option data-value="3">Foo</option>
</datalist>

Ответ 2

Вы можете использовать data-value и jquery, чтобы сделать ваше значение скрытым.

например:

$(document).ready(function() {

    $('#submit').click(function()
    {
        var value = $('#selected').val();
        alert($('#browsers [value="' + value + '"]').data('value'));
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="selected" list="browsers" name="browser">
<datalist id="browsers">
    <option data-value="1" value="InternetExplorer"></option>
    <option data-value="2" value="Firefox"></option>
    <option data-value="3" value="Chrome"></option>

</datalist>
<input id="submit" type="submit">

Ответ 3

Итак, для кодовой базы, над которой я работаю, у меня есть программный fieldWriter для написания динамических форм. Меня попросили превратить группу отборов в автозаполненных даталистов. Для этого я настроил 3 элемента.

  • Один даталист с именем "somefield_dl"
  • Один видимый вход с именем "somefield_proxy"
  • Один скрытый вход с именем "somefield"

В списках данных я устанавливаю каждый параметр следующим образом: <option data-value="439" value="Readable Text"></option>

Что касается обработчиков событий, то каждый раз, когда "somefield_proxy" изменяется, "somefield" изменяется на значение-значение параметра из "somefield_dl" с соответствующим значением.

Основным отличием от кода для их использования является то, что каждый раз, когда вы обновляете значение поля, вы должны инициировать событие щелчка на скрытом входе, чтобы обновить вход прокси. Также при сборе данных вы должны исключить элементы, имя которых заканчивается на _proxy.

Ответ 4

Не знаю, что это поможет вам, просто попробовал

  <input list="options" id="opt" oninput="onInput()">
  <datalist id="options">
        <option value="1">Foo</option>
       <option value="2">Bar</option>
       <option value="3">Foo</option> 
        <option value="4">Foo</option>
       <option value="5">Bar</option>
       <option value="6">Foo</option> 
  </datalist>




 $( document ).ready(function() {              
         var x =  document.getElementById("options");
           for (i = 0; i < x.length; i++)
            alert(x.options[i].value);     


            $("#opt").click(function(){
                 $("#opt").val("");});                   
             });

     function onInput() {
            var val = document.getElementById("opt").value;
            var opts = document.getElementById('options').childNodes;
             for (var i = 0; i < opts.length; i++) {
                    if (opts[i].value === val) {                
                    document.getElementById("opt").value = opts[i].value + "   "+ opts[i].innerHTML;
                    break;
                  }
                }
              }

Ответ 5

Правильный синтаксис datalist похож на ниже. Также нет смысла иметь два варианта с тем же именем. Я выбрал JavaScript из HTML как и должно быть. Идентификатор атрибута отдельных параметров может быть заменен другим атрибутом.

$(function() {
  $('input[name=chooseOption]').on('input',function() {
    var selectedOption = $('option[value="'+$(this).val()+'"]');
    console.log(selectedOption.length ? selectedOption.attr('id') : 'This opiton is not in the list!');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input list="options" name="chooseOption">
<datalist id="options">
  <option id="1" value="Foo">
  <option id="2" value="Bar">
  <option id="3" value="Foo">
</datalist>