效果图： 

 

源代码：

 
    
     
         
  1.  
    2.  
         
  2.  
    3.  
         
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
    4.  
         
  4. <html> 
    5.  
         
  5. <head> 
    6.  
         
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    7.  
         
  7. <title>Insert title here</title> 
    8.  
         
  8. </head> 
    9.  
         
  9. <body> 
    10.  
         
  10. <div> 
    11.  
         
  11. <h4>三级联动：</h4> 
    12.  
         
  12. <select id="s1"> 
    13.  
         
  13.     <option value="">请选择</option> 
    14.  
         
  14. </select> 
    15.  
         
  15. <select id="s2"> 
    16.  
         
  16.     <option value="">请选择</option> 
    17.  
         
  17. </select> 
    18.  
         
  18. <select id="s3"> 
    19.  
         
  19.     <option value="">请选择</option> 
    20.  
         
  20. </select> 
    21.  
         
  21. </div> 
    22.  
         
  22. <input type="button" id="btn1" value="聚焦到德清县"> 
    23.  
         
  23. <input type="button" id="btn2" value="聚焦到上城区"> 
    24.  
         
  24. <div> 
    25.  
         
  25. <h4>二级联动：</h4> 
    26.  
         
  26. <select id="a1"> 
    27.  
         
  27.     <option value="">请选择</option> 
    28.  
         
  28. </select> 
    29.  
         
  29. <select id="a2"> 
    30.  
         
  30.     <option value="">请选择</option> 
    31.  
         
  31. </select> 
    32.  
         
  32. </div> 
    33.  
         
  33.              
    34.  
         
  34. <input type="button" id="btn3" value="聚焦到杭州市"> 
    35.  
         
  35. <input type="button" id="btn4" value="聚焦到绍兴市"> 
    36.  
         
  36. <script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> 
    37.  
         
  37. <script type="text/javascript" src="js/tdist.js"></script> 
    38.  
         
  38. <script type="text/javascript" src="js/cityselect.jquery.js"></script> 
    39.  
         
  39. <script type="text/javascript"> 
    40.  
         
  40. (function($){ 
    41.  
         
  41.     var sel = new $.CitySelect({ 
    42.  
         
  42.         targets:["#s1","#s2","#s3"] 
    43.  
         
  43.     });  
    44.  
         
  44.  
    45.  
         
  45.     $("#btn1").click(function(){ 
    46.  
         
  46.         sel.focus(2,"330521"); 
    47.  
         
  47.     }); 
    48.  
         
  48.  
    49.  
         
  49.     $("#btn2").click(function(){ 
    50.  
         
  50.         sel.focus(2,"330102"); 
    51.  
         
  51.     }); 
    52.  
         
  52.  
    53.  
         
  53.      
    54.  
         
  54.     var sel2 = new $.CitySelect({ 
    55.  
         
  55.         targets:["#a1","#a2"] 
    56.  
         
  56.     });  
    57.  
         
  57.  
    58.  
         
  58.     $("#btn3").click(function(){ 
    59.  
         
  59.         sel2.focus(1,"330100"); 
    60.  
         
  60.     }); 
    61.  
         
  61.     $("#btn4").click(function(){ 
    62.  
         
  62.         sel2.focus(1,"330600"); 
    63.  
         
  63.     }); 
    64.  
         
  64.      
    65.  
         
  65. })(jQuery); 
    66.  
         
  66.  
    67.  
         
  67. </script> 
    68.  
         
  68.  
    69.  
         
  69. </body> 
    70.  
         
  70. </html> 
    71.