效果圖：
源代碼：
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Insert title here</title>
- </head>
- <body>
- <div>
- <h4>三級聯動：</h4>
- <select id="s1">
- <option value="">請選擇</option>
- </select>
- <select id="s2">
- <option value="">請選擇</option>
- </select>
- <select id="s3">
- <option value="">請選擇</option>
- </select>
- </div>
- <input type="button" id="btn1" value="聚焦到德清縣">
- <input type="button" id="btn2" value="聚焦到上城區">
- <div>
- <h4>二級聯動：</h4>
- <select id="a1">
- <option value="">請選擇</option>
- </select>
- <select id="a2">
- <option value="">請選擇</option>
- </select>
- </div>
- <input type="button" id="btn3" value="聚焦到杭州市">
- <input type="button" id="btn4" value="聚焦到紹興市">
- <script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
- <script type="text/javascript" src="js/tdist.js"></script>
- <script type="text/javascript" src="js/cityselect.jquery.js"></script>
- <script type="text/javascript">
- (function($){
- var sel = new $.CitySelect({
- targets:["#s1","#s2","#s3"]
- });
- $("#btn1").click(function(){
- sel.focus(2,"330521");
- });
- $("#btn2").click(function(){
- sel.focus(2,"330102");
- });
- var sel2 = new $.CitySelect({
- targets:["#a1","#a2"]
- });
- $("#btn3").click(function(){
- sel2.focus(1,"330100");
- });
- $("#btn4").click(function(){
- sel2.focus(1,"330600");
- });
- })(jQuery);
- </script>
- </body>
- </html>