jquery实现省市二级联动

桃扇骨 2022-06-04 09:25 381阅读 0赞 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.         "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>省市联动</title>
  7.     <script type="text/javascript" src="jquery-1.11.1.js"></script>
  8.     <script type="text/javascript">
  9.         var pro=["河南","山东","黑龙江"];
  10.         var city=[["郑州","开封","新政","濮阳","平顶山","洛阳","三门峡"],["济南","日照","烟台","德州","聊城"],["哈尔滨","齐齐哈尔","佳木斯","牡丹江"]];
  11.         $(function(){
  12.             //初始化省份下拉列表
  13.             for(var i=0;i<pro.length;i++){
  14.                 $("#province").append($("<option></option>").val(i+1).html(pro[i]));
  15.             }
  16.             //为省份下拉列表绑定change事件
  17.             $("#province").change(function(){
  18.                 var index=$(this).val()-1;//获取当前省的下标
  19.                 $("#city").prop("length",1);//清空原有的数据
  20.                 for(var i=0;i<city[index].length;i++){//重新为市赋值
  21.                     $("#city").append($("<option>").val(i+1).html(city[index][i]));
  22.                 }
  23.             });
  24.         })
  25.     </script>
  26. </head>
  27. <body>
  28.     <div style="height: 200px;width: 300px;background-color: aquamarine;text-align: center" id="div1">
  29.         <select id="province">
  30.             <option value="0" selected>-请选择-</option>
  31.         </select>省
  32.         <select id="city">
  33.             <option value="0" selected>-请选择-</option>
  34.         </select>市
  35.     </div>
  36. </body>
  37. </html>

发表评论

表情：
评论列表 （有 0 条评论，381人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Java数组实现省市二级联动

    数组的强大之处毋庸置疑，今天我要写的是用一个一维数组和一个二维数组来实现一个省市二级联动的功能。 1.首先定义一个一维数组，用来存放34个省级行政区域；定义一个二维数组，用来

    淩亂°似流年淩亂°似流年/ 0 赞/ 506 阅读