html动态下拉列表,jQuery实现动态显示select下拉列表数据的方法
本文實例講述了jQuery實現動態顯示select下拉列表數據的方法。分享給大家供大家參考,具體如下:
先來看看運行效果:
具體代碼如下:
www.ddpool.cn jQuery動態顯示表單//數據集
var schools = [
{ 'id': 1, 'name': '南京大學' },
{ 'id': 2, 'name': '北京大學' },
{ 'id': 3, 'name': '浙江大學' },
{ 'id': 4, 'name': '清華大學' },
{ 'id': 5, 'name': '湖南大學' },
];
//頁面加載運行,將數據集綁定select,顯示默認選中學校
$(function () {
bindSelect();
$('#info').text($('#schoolSelect').val());
});
//將數據集綁定select,重新選擇學校后顯示選中學校
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('' + item.name + '');
} else {
$schoolSelect.append('' + item.name + '');
}
}
}
}
希望本文所述對大家jQuery程序設計有所幫助。
總結
以上是生活随笔為你收集整理的html动态下拉列表,jQuery实现动态显示select下拉列表数据的方法的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: StoneDB 为何敢称业界唯一开源的
- 下一篇: 20款精美APP和Web设计模板素材(附