HTML5データリストは値とオプションのテキストを区別できますか？

Question

HTML5フォームのlist属性/ 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> 

Answer 1

JS + CSSヘルプを使用せずに純粋なHTMLでできないようです。

お試しください。

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

ベストウイッシュ クマール

以下

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