首頁 > 開發者 > JavaScript
jQuery實現動態顯示select下拉式清單資料的方法，jqueryselect
本文執行個體講述了jQuery實現動態顯示select下拉式清單資料的方法。分享給大家供大家參考，具體如下：
先來看看運行效果：
具體代碼如下：
<!DOCTYPE HTML><html><head> <meta charset="UTF-8"> <title>www.jb51.net 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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
