自定义“三级联动”(截取字符串匹配)

最新推荐文章于 2022-12-04 12:19:13 发布

Take_Dream

最新推荐文章于 2022-12-04 12:19:13 发布

阅读量394

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/Take_Dream_as_Horse/article/details/50965307

版权

javascript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
 <head>
 <title>JS版三级联动</title>
  <meta charset="utf-8" />
  <meta name="author" content="徐崧" />

  <script src="jquery-1.11.3.js"></script>
  <style type="text/css">


  #d1{
  width:500px;
  height:300px;
  border:2px solid green;
  margin-left:100px;
  margin-top:100px;
  text-align:center; 
  }
  
  </style>


 </head>
 <body>
  <div id="d1">
    <h1>用JS模拟收货地址</h1>


<select id="province">
<option value="">-请选择省份-</option>
<option value="aaaa">四川省</option>
<option value="bbbb">广东省</option>
<option value="cccc">海南省</option>
</select>


<select id="city">
<option value="">-请选择城市-</option>
</select>


<select id="district">
<option value="">-请选择地区-</option>
</select>
  
  </div>
  
  
  <script type="text/javascript">


 var arr1=[];


 arr1["aaa"]=[["成都市"],["绵阳市"],["南充市"],["广元市"],["达州市"],["德阳市"],["广安市"],["阿坝州"],["巴中市"],["遂宁市"],["内江市"],["凉山州"],["攀枝花市"],["乐山市"],["自贡市"],["泸州市"],["雅安市"],["宜宾市"],["资阳市"],["眉山市"],["甘孜州"]];


 arr1["bbb"]=[["广州市"],["深圳市"],["珠海市"],["东莞市"],["中山市"],["惠州市"],["江门市"],["汕头市"],["佛山市"],["湛江市"],["河源市"],["肇庆市"],["清远市"],["潮州市"],["韶关市"],["揭阳市"],["阳江市"],["梅州市"],["云浮市"],["茂名市"],["汕尾市"]];


 arr1["ccc"]=[["海口市"],["三亚市"],["文昌市"],["琼海市"],["东方市"],["昌江县"],["陵水县"],["乐东县"],["保亭县"],["五指山市"],["澄迈县"],["万宁市"],["儋州市"],["临高县"],["白沙县"],["定安县"],["琼中县"],["屯昌县"]];




 var arr2=[];
 arr2["成都市"]=[["武侯区"],["锦江区"],["成华区"],["金牛区"]]


由省份选择城市
 $("#province").change(function(){
  
  var province=$(this).val();
  province=province.substring(0,3);


  $("#city").empty();
  $("#city").append("<option>请选择城市</option>");
  for(var key in arr1){
  if(province===key){
  for(var i=0;i<arr1[province].length;i++){
  $("#city").append("<option>"+arr1[province][i]+"</option>");
}


  }
}
  
 });


 由城市选择市区
 $("#city").change(function(){
  
  var city=$(this).val();
  console.log(city);


  $("#district").empty();
  $("#district").append("<option>请选择区域</option>");
  for(var key in arr2){
  if(city===key){
  for(var i=0;i<arr2[city].length;i++){
  $("#district").append("<option>"+arr2[city][i]+"</option>");
}


  }
}
  
 });


  </script>
 </body>
</html>

Take_Dream

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义“三级联动”(截取字符串匹配)

1、HTML代码： -请选择省份-四川省广东省海南省-请选择城市--请选择地区- JS代码： var arr1=[]; arr1["aa"]=[["成都市"],["绵阳市"],["南充市"]]; arr1["bb"]=[["广州市
复制链接

扫一扫