本文實例講述了jQuery實現動態顯示select下拉列表數據的方法。分享給大家供大家參考，具體如下：
先來看看運行效果：
具體代碼如下：
<!DOCTYPE HTML><html><head> <meta charset="UTF-8"> <title>m.survivalescaperooms.com jQuery動態顯示表單</title> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript"> //數據集 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('<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>更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery表單(form)操作技巧總結》、《jQuery常用插件及用法總結》、《jQuery擴展技巧總結》、《jQuery切換特效與技巧總結》、《jQuery遍歷算法與技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
