jQuery全国高校三级联动下拉选择菜
1、新建html文档。
2、书写hmtl代艨位雅剖码。<div class="content"><颊俄岿髭div class="rows"> <div class="label">省份</div> <div style="padding-left:0px;padding-right:5px;display:inline-block;color: #ccc;text-align: center;font-weight: lighter;">|</div> <div class="text"> <select id="province" name="province"> </select> </div></div><div class="rows"> <div class="label">城市</div> <div style="padding-left:0px;padding-right:5px;display:inline-block;color: #ccc;text-align: center;font-weight: lighter;">|</div> <div class="text"> <select id="city" name="city"> </select> </div></div><div class="rows"> <div class="label">学校</div> <div style="padding-left:0px;padding-right:5px;display:inline-block;color: #ccc;text-align: center;font-weight: lighter;">|</div> <div class="text"> <select id="school" name="school"> </select> </div></div></div>
3、书写css代码。<style>body { background-color: aliceblue; }select { width: 100%; height: 30px; border-radius: 5px; border-color: aliceblue; font-size: 14px; letter-spacing: 5px; }.content { width: 300px; margin: 60px auto; }.rows { width: 100%; height: 42px; border-radius: 14px; margin-top: 10px; background-color: #ffffff; }.label { display: inline-block; padding: 10px; color: #03A9F4; letter-spacing: 7px; }.text { display: inline-block; width: 70%; color: #3a3838; }</style>
4、书写并添加js代码。<script src="js/jquery.min.js"></script><script src="js/AllSchool.js"></script><script> window.onload=function(){ var provinceArray = ""; var provicneSelectStr = ""; for(var i=0,len=province.length;i<len;i++){ provinceArray = province[i]; provicneSelectStr = provicneSelectStr + "<option value='"+provinceArray[0]+"'>"+provinceArray[1]+"</option>" } $("#province").html(provicneSelectStr); var selectCity = $("#province").val(); var citylist=city[selectCity]; var cityArray = ""; var citySelectStr = ""; for(var i=0,len=citylist.length;i<len;i++){ cityArray = citylist[i]; citySelectStr = citySelectStr + "<option value='"+cityArray[0]+"'>"+cityArray[1]+"</option>" } $("#city").html(citySelectStr); var selectschool = $("#city").val(); var schoolUlStr = ""; var schoolListStr = allschool[selectschool]; for(var i=0,len=schoolListStr.length;i<len;i++){ schoolUlStr = schoolUlStr + "<option >"+schoolListStr[i][2]+"</option>"; } schoolUlStr = schoolUlStr + "<option value='999'>其它</option>"; $("#school").html(schoolUlStr); //省切换事件 $("#province").change(function(){ var selectCity = $("#province").val(); var citylist=city[selectCity]; var cityArray = ""; var citySelectStr = ""; if(citylist!=null){ for(var i=0,len=citylist.length;i<len;i++){ cityArray = citylist[i]; citySelectStr = citySelectStr + "<option value='"+cityArray[0]+"'>"+cityArray[1]+"</option>" } } $("#city").html(citySelectStr); $("#school1").show(); $("#school2").hide(); var selectschool = $("#city").val(); var schoolUlStr = ""; var schoolListStr = allschool[selectschool]; for(var i=0,len=schoolListStr.length;i<len;i++){ schoolUlStr = schoolUlStr + "<option >"+schoolListStr[i][2]+"</option>"; } schoolUlStr = schoolUlStr + "<option value='999'>其它</option>"; $("#school").html(schoolUlStr); }); //切换城市事件 $("#city").change(function(){ $("#school1").show(); $("#school2").hide(); var selectschool = $("#city").val(); var schoolUlStr = ""; var schoolListStr = allschool[selectschool]; for(var i=0,len=schoolListStr.length;i<len;i++){ schoolUlStr = schoolUlStr + "<option >"+schoolListStr[i][2]+"</option>"; } schoolUlStr = schoolUlStr + "<option value='999'>其它</option>"; $("#school").html(schoolUlStr); }); $("#school").change(function(){ if($("#school").val()=="999"){ $("#school1").hide(); $("#school2").show(); } }); $("#second").show(); $("#restart").css("backgorund","url('assets/images/chongxintijiao.jpg') no-repeat"); }</script>
5、代码整体结构。
6、查看效果。
