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

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

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

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

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

источник

2013-08-27 Alex

Я думаю, что вы не можете сделать это только с одним входом. Это достижимо с одним входом для отображаемого текста, а вторым - скрытым, который будет содержать идентификаторы. Это, плюс некоторый скрипт, чтобы синхронизировать их. – SWilk

Возможный дубликат [Показывать ярлыки каталогов, но представить фактическое значение] (http://stackoverflow.com/questions/29882361/show-datalist-labels-but-submit-the-actual-value) –

Кажется, вы не можете с чистым 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>

сценария

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

Пожелание Кумара

источник

2013-10-25 07:04:42

Вы явно использовали некоторую библиотеку здесь, пожалуйста, укажите, какой из них. Кроме того, @Alex спросил, как сделать идентификатор отправки формы выбранного значения списка. Поэтому я думаю, что ваш скрипт должен изменить элемент или добавить скрытый элемент, который будет содержать идентификатор. – SWilk

yes your right Я могу добавить сообщение скрытого элемента только с идентификатором. его работа как обычный вариант выбора. –

Кумар, кажется, что кредит для @infocyde должен быть в ваших заметках где-то, так как ваше решение выглядит как вырезание и вставка его ответа здесь: http://stackoverflow.com/questions/14532398/html5-datalist-value-vs-inner -text? rq = 1 – globalSchmidt

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

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

источник

2014-10-13 05:52:49 user1587439

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

ответ

Смежные вопросы