完成一個級聯下拉列表框（例如：省市聯動）需要多少行代碼呢？
問過若干人，答案從100行到幾萬行的都有。
那么對於一個二級聯動下拉列表框需要這么多代碼的話，那么一個四級的聯動下拉列表框（比如：品牌、分類、類型、型號）又需要多少行代碼？
對於這個問題，我們推薦的是，每個增加一個下拉列表框只要2行。
當然，這沒有計算寫成通用結構的代碼。
那么，我們來看看是什么樣的代碼能夠通用到這種程度，可以每增加一個下拉列表框只需要2行就可以了。
為了簡單起見，我們采用兩套級聯下拉列表框來實現例子。一個是省市下拉列表框，另一個是產品下拉列表框。
先上代碼：
1 <HTML encoding="UTF-8"> 2 <head> 3 <title>Cascade Drop Down</title> 4 <style type="text/css"> 5 .cascade_drop_down {width:200px; 6 </style> 7 <script type="text/javascript" src="jquery.min.js"></script> 8 <script type="text/javascript"> 9 $(document).ready(function(){ 10 11 $(".cascade_drop_down").change( 12 function () { 13 var name = $(this).attr("name") + "_next"; 14 var next = $("#" + name).val(); 15 if (next == null || next == '') { 16 return; 17 } 18 19 $("#" + next).empty(); 20 21 $.ajax({ 22 type:'post', 23 url: $(this).val() + '.txt', 24 data:'name=' + name + '&val=' + $(this).val(), 25 dataType:'text', 26 success:function(msg){ 27 ops = msg.split("\n"); 28 for (i = 0; i < ops.length; i++) { 29 $("#" + next).append(ops[i]); 30 } 31 }, 32 error:function(){ 33 alert("failed."); 34 } 35 }); 36 } 37 ) 38 39 }); 40 41 </script> 42 </head> 43 <body> 44 45 <div> 46 <input type="hidden" id="province_next" name="province_next" value="city"> 47 <input type="hidden" id="city_next" name="city_next" value=""> 48 49 <select id="province" name="province" class="cascade_drop_down"> 50 <option value="beijing">北京</option> 51 <option value="tianjin">天津</option> 52 <option value="shanghai">上海</option> 53 <option value="chongqing">重慶</option> 54 <option value="heilongjiang">黑龍江</option> 55 <option value="jilin">吉林</option> 56 <option value="liaoning">遼寧</option> 57 </select> 58 59 <select id="city" name="city" class="cascade_drop_down"> 60 </select> 61 </div> 62 63 <div> 64 <input type="hidden" id="brand_next" name="brand_next" value="category"> 65 <input type="hidden" id="category_next" name="category_next" value="type"> 66 <input type="hidden" id="type_next" name="type_next" value="series"> 67 <input type="hidden" id="series_next" name="series_next" value=""> 68 69 <select id="brand" name="brand" class="cascade_drop_down"> 70 <option value="canon">佳能</option> 71 <option value="sony">索尼</option> 72 <option value="panasonic">松下</option> 73 </select> 74 75 <select id="category" name="category" class="cascade_drop_down"> 76 </select> 77 78 79 <select id="type" name="type" class="cascade_drop_down"> 80 </select> 81 82 83 <select id="series" name="series" class="cascade_drop_down"> 84 </select> 85 86 </div> 87 </body> 88 89 </HTML>
這些代碼是高度復用的，我們可以根據代碼規則建立數據文件，例如：beijing.txt
1 <option value='1'>朝陽</option> 2 <option value='2'>海淀</option> 3 <option value='3'>東城</option> 4 <option value='4'>西城</option> 5 <option value='5'>石景山</option> 6 <option value='6'>大興</option> 7 <option value='7'>豐台</option> 8 <option value='8'>通州</option> 9 <option value='9'>房山</option> 10 <option value='10'>密雲</option> 11 <option value='11'>懷柔</option> 12 <option value='12'>平谷</option> 13 <option value='13'>昌平</option> 14 <option value='14'>延慶</option> 15 <option value='15'>順義</option>
好的，我們來分析一下，為什么上述代碼具有高度的抽象性。
1. 采用jQuery
利用class作為識別符，將級聯下拉列表框選出來。
當選項發生變化的時候，調用Ajax，訪問對應的數據文件(.txt)。然后，將數據文件解析后的數據加入到下一個下拉列表框，以此類推，所有的下拉列表框都可以做到級聯。
2. 數據采用txt
對於相對固定的數據可以采用txt來作為數據源，每次發布的時候都無需重新啟動服務器。但是對於數據源為動態源的情況，需要訪問數據庫。這時候只要修改對應的ajax訪問URL即可。
結論：采用高度抽象以后，每增加一個下拉列表框只需要2行即可，1行用來聲明下拉列表框，另一行用來定義下一個響應的下拉列表框ID。