省市聯動——季度-月份下拉列表框——jQuery版
阿新 • • 發佈：2018-12-26
引入jQuery類庫：
jquery-1.6.1.js;原始碼：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>省市聯動</title> <script type="text/javascript" src="js/jquery-1.6.1.js"></script> <script type="text/javascript"> //當季度變化時，被選項月份也會做出相應的變化 function quarterSelect(){ if($("#quarter option:selected").val()=="01"){ $("#month option").show(); for(var i=4;i<10;i++){ $("#month option[value='0"+i+"']").hide(); } for(var i=10;i<13;i++){ $("#month option[value='"+i+"']").hide(); } $("#month option:first").hide(); $("#month option[value='01']").attr("selected","selected"); }else if($("#quarter option:selected").val()=="02"){ $("#month option").show(); for(var i=1;i<4;i++){ $("#month option[value='0"+i+"']").hide(); } for(var i=7;i<10;i++){ $("#month option[value='0"+i+"']").hide(); } for(var i=10;i<13;i++){ $("#month option[value='"+i+"']").hide(); } $("#month option:first").hide(); $("#month option[value='04']").attr("selected","selected"); }else if($("#quarter option:selected").val()=="03"){ $("#month option").show(); for(var i=1;i<7;i++){ $("#month option[value='0"+i+"']").hide(); } for(var i=10;i<13;i++){ $("#month option[value='"+i+"']").hide(); } $("#month option:first").hide(); $("#month option[value='07']").attr("selected","selected"); }else if($("#quarter option:selected").val()=="04"){ $("#month option").show(); for(var i=1;i<10;i++){ $("#month option[value='0"+i+"']").hide(); } $("#month option:first").hide(); $("#month option[value='10']").attr("selected","selected"); }else if($("#quarter option:selected").val()==""){ $("#month option").show(); $("#month option[value='']").attr("selected","selected"); } } //當月份變化時，季度也會做出相應的變化 function monthSelect(){ var tempStr=$("#month option:selected").val(); var tempInt=parseInt(tempStr); if(tempInt<4){ $("#quarter option[value='01']").attr("selected","selected"); }else if(tempInt>=4&&tempInt<7){ $("#quarter option[value='02']").attr("selected","selected"); }else if(tempInt>=7&&tempInt<10){ $("#quarter option[value='03']").attr("selected","selected"); }else if(tempInt>=10){ $("#quarter option[value='04']").attr("selected","selected"); }else if($("#month option:selected").val()==""){ $("#quarter option").show(); $("#quarter option[value='']").attr("selected","selected"); } } </script> </head> <body> <h3>季度-月份下拉列表框</h3> <div id="city_5"> <select id="quarter" name="quarter" class="prov" onchange="quarterSelect()"> <!-- <select id="quarter" name="quarter" class="prov"> --> <option value="">請選擇</option> <option value="01">第一季度</option> <option value="02">第二季度</option> <option value="03">第三季度</option> <option value="04">第四季度</option> </select> <select id="month" name="month" class="city" onchange="monthSelect()"> <!-- <select id="month" name="month" class="city" disabled="disabled"> --> <option value="">請選擇</option> <option value="01">1</option> <option value="02">2</option> <option value="03">3</option> <option value="04">4</option> <option value="05">5</option> <option value="06">6</option> <option value="07">7</option> <option value="08">8</option> <option value="09">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> </div> </body> </html>
執行的結果：
