Может ли HTML5 datalist различать значение и текст опции?

Элемент list/datalist в форматах HTML5 показывает раскрывающееся меню выбора, из которого можно выбрать, отредактировать и даже ввести текст. Все это может быть достигнуто сразу с помощью чистого и мощного кода:

<input list="states">
<datalist id="states">
    <option value="One">
    <option value="Two">
</datalist>

Однако как сделать такую ​​форму отправить значение, отличное от текста опции, как в обычном select/option (ниже)?

<select>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

Ответы

Ответ 1

Кажется, вы не можете с чистым HTML, не используя некоторую помощь JS + CSS.

попробуйте это, я надеюсь, что он вам поможет.

HTML

<input id="datalisttestinput" list="stuff" ></input>
        <datalist id="stuff">
            <option id="3" value="Collin" >
            <option id="5" value="Carl">
            <option id="1" value="Amy" >
            <option id="2" value="Kristal">
        </datalist>

script

function GetValue() {
            var x = $('#datalisttestinput').val();
            var z = $('#stuff');
            var val = $(z).find('option[value="' + x + '"]');
            var endval = val.attr('id');
            alert(endval);
        }

Лучшие пожелания Кумар

Ответ 2

Ниже приведен измененный ответ Kumah, в котором используется скрытое поле, содержащее значение, которое в конечном итоге отправляется на сервер.

$('#inputStates').change(function(){
    var c =  $('#inputStates').val();
    $('#inputStates').val(getTextValue());
    $('#statesHidden').val(c);
});

function getTextValue(){
  var val =  $('#inputStates').val();
  var states = $('#states');
  var endVal = $(states).find('option[value="' + val + '"]');
  //depending on your logic, if endVal is empty it means the value wasn't found in the datalist, you can take some action here
  return endVal.text();
}