HTML5 datalist可以區分價值和選項文本嗎？

HTML5表單的列表屬性/ datalist元素顯示了一個可以從中選擇，編輯甚至鍵入某些文本的下拉菜單。這一切都可以畢其功於一役，乾淨且強大的代碼：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

我認爲你不能只用一個輸入做到這一點。它可以通過一個輸入顯示文本來實現，而第二個隱藏將包含ID。那加上一些腳本來同步它們。 – SWilk

[顯示datalist標籤，但提交實際值]的可能重複（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詢問如何使表單發送所選列表值的標識符。所以我認爲你的腳本應該修改元素，或者添加包含id的隱藏元素。 – SWilk

是的，你的權利，我可以添加隱藏的元素後僅包含id。其工作像通常的選擇選項。 –

庫馬爾，似乎信用@infocyde應該在你的筆記某處作爲你的解決方案看起來像他的答案在這裏剪切和粘貼：http://stackoverflow.com/questions/14532398/html5-datalist-value-vs-inner -text？rq = 1 – globalSchmidt

下面是使用一個隱藏字段包含最終被髮送到服務器的值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(); 
}

來源

2014-10-13 05:52:49 user1587439

HTML5 datalist可以區分價值和選項文本嗎？

回答

相關問題