jQuery中实现省市联动

r囧r小猫 2021-09-18 23:04 482阅读 0赞 
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
  7.         <style type="text/css">
  9.         </style>
  10.         <script type="text/javascript">
  11.             var provinceArr = new Array(5);
  12.             provinceArr[0]=new Array("北京市");
  13.             provinceArr[1]=new Array("郑州市","洛阳市","濮阳市","驻马店市");
  14.             provinceArr[2]=new Array("石家庄市","唐山","秦皇岛","邯郸");
  15.             provinceArr[3]=new Array("西安市","宝鸡市","延安");
  16.             provinceArr[4]=new Array("菏泽市","济南市","青岛");
  18.             $(function(){
  19.                 $("#province").change(function(){
  20.                     $("#city").empty();
  21.                     var provinceID = this.value;
  22.                     console.log(provinceID);
  23.                     if(provinceID==-1){
  24.                         $("#city").html("<option value=\"-1\">-请选择-</option>");
  25.                     }else{
  27.                         for(var i = 0;i<provinceArr[provinceID].length;i++){
  28.                             var option = document.createElement("option");
  29.                             option.innerText=provinceArr[provinceID][i];
  30.                             $("#city").append(option);
  31.                         }
  32.                     }
  33.                 });
  34.             });
  36.         </script>
  37.     </head>
  38.     <body>
  39.         <select id="province">
  40.             <option value="-1">-请选择-</option>
  41.             <option value="0">北京市</option>
  42.             <option value="1">河南省</option>
  43.             <option value="2">河北省</option>
  44.             <option value="3">陕西省</option>
  45.             <option value="4">山东省</option>
  46.         </select>
  47.         <select id="city">
  48.             <option value="-1">-请选择-</option>
  49.         </select>
  50.     </body>
  51. </html>

20190414092852798.gif

发表评论

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

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

相关阅读