This time I bring you jQueryDynamic display of selectdrop-down list data, what are the precautions for jQuery to dynamically display select drop-down list data, the following are Let’s take a look at practical cases.
Let’s take a look at the running effect first:
The specific code is as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery動(dòng)態(tài)顯示表單</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
//數(shù)據(jù)集
var schools = [
{ 'id': 1, 'name': '南京大學(xué)' },
{ 'id': 2, 'name': '北京大學(xué)' },
{ 'id': 3, 'name': '浙江大學(xué)' },
{ 'id': 4, 'name': '清華大學(xué)' },
{ 'id': 5, 'name': '湖南大學(xué)' },
];
//頁面加載運(yùn)行，將數(shù)據(jù)集綁定select，顯示默認(rèn)選中學(xué)校
$(function () {
bindSelect();
$('#info').text($('#schoolSelect').val());
});
//將數(shù)據(jù)集綁定select，重新選擇學(xué)校后顯示選中學(xué)校
bindSelect = function () {
var $schoolSelect = $('#schoolSelect');
$schoolSelect.change(function () {
$('#info').text($(this).val());
});
if (schools.length > 0) {
for (var i = 0; i < schools.length; i++) {
var item = schools[i];
if (item.id == 2) {
$schoolSelect.append('<option value="' + item.id + '" selected>' + item.name + '</option>');
} else {
$schoolSelect.append('<option value="' + item.id + '">' + item.name + '</option>');
}
}
}
}
</script>
</head>
<body>
<form>
<select id="schoolSelect">
</select>
<label id="info"></label>
</form>
</body>
</html> I believe I have read the case in this article You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Detailed explanation of the use of full-screen scrolling plug-in fullpage.js
How to prevent the same event from being triggered repeatedly
How to automatically load more content when the scroll bar slides to the bottom
The above is the detailed content of jQuery dynamically displays select drop-down list data. For more information, please follow other related articles on the PHP Chinese website!