您的位置：首页 > Web前端 > JQuery

Jquery动态绑定html5 datalist数据

2014-09-28 15:17 316 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery html5 datalist

相关文章推荐

新的分享

章节导航