Czy dane HTML5 mogą różnicować wartość i tekst opcji?

Question

Element listy/datalist w formularzach HTML5 pokazuje rozwijane menu wyborów, z których można wybierać, edytować, a nawet wpisywać tekst. Wszystko to można osiągnąć od razu z czystym i potężnym kodu:

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

Jednakże, jak zrobić taki formularz wysłać wartość, która różni się od tekstu opcji, jak w zwykłym Select/opcji (poniżej) ?

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

Answer 1

Wygląda na to, że nie można z czystym HTMLem bez korzystania z jakiejś pomocy JS + CSS.

spróbuj tego, mam nadzieję, że ci pomoże.

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> 

skrypt

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

Najlepsze życzenia Kumar

Answer 2

Poniżej jest zmodyfikowana odpowiedź Kumah że wykorzystuje ukryte pole zawiera wartość, która ostatecznie zostaje wysłany do serwera.

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