web-dev-qa-db-ja.com

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

HTML5フォームのlist属性/ datalist要素には、選択、編集、さらにはテキストの入力が可能な選択肢のドロップダウンメニューが表示されます。これはすべて、クリーンで強力なコードで一度に実現できます。

<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>
htmlselecthtml-datalist
12
Alex

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

最高の願いクマール

4
Kumar Shanmugam

以下は、最終的にサーバーに送信される値を含むために非表示フィールドを使用する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();
}
1
user1587439