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>
答案 0 :(得分:4)
如果不使用某些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);
}
祝福 库马尔
答案 1 :(得分:1)
以下是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();
}