Jquery动态绑定html5 datalist数据

网页需显示输入过查找的历史

<body>
text:<input type="text" name="geeting" list="greetings">
<datalist id="greetings" style="display:none">
<option value="Good Moning">Good Morning</option>
<option value="Hello">Hello</option>
<option value="Good Afternoon">Good Afternoon</option>
</datalist>
</body>

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<title>表单验证</title>

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>

<script type="text/javascript">

//数据集

var schools = [

{ 'label': '江苏', 'value': '南京大学' },

{ 'label': '北京', 'value': '北京大学' },

{ 'label': '北京', 'value': '清华大学' },

{ 'label': '浙江', 'value': '浙江大学' },

{ 'label': '上海', 'value': '同济大学' },

];

$(function () {

if (schools.length > 0) {

for (var i = 0; i < schools.length; i++) {

var item=schools[i];

$('#schoolList')

.append('<option label="' + item.label + '" value="' + item.value + '"></option>');

}

}

$('#btnTest').click(function () {

alert($('#txtTest').val());

});

});

</script>

</head>

<body>

<form>

<datalist id="schoolList"></datalist>

<input id="txtTest" type="text" list="schoolList" />

<input id="btnTest" type="button" value="test" />

</form>

</body>

</html>

发布了20 篇原创文章 · 获赞 16 · 访问量 18万+

猜你喜欢

转载自blog.csdn.net/jane007123/article/details/88397822
今日推荐