用javascript实现三级联动

最新推荐文章于 2022-09-24 01:00:00 发布
最新推荐文章于 2022-09-24 01:00:00 发布
阅读量876 收藏
点赞数
分类专栏： ASP.NET 文章标签： .net javascript html function
<html>
<head>
 <title>三级联动下拉</title>
<script>


 


 //根据选中省iD获取对应市
 function getPro(province)
 {
  var provinceID=null;
  for(var i=0;i<province.length;i++)
  {
      if(province.options[i].selected)
      {
    provinceID=province.options[i].value;
    break;
       }
  }
  if(provinceID!=null)
  {
   var city = document.forms[0].elements("selCity");
   var zone = document.forms[0].elements("selZone");
   clearSel(city);
   clearSel(zone);
   
   if(provinceID=="1")
   {
    var wuhan = createSel("10","武汉市");
    var huangshi = createSel("11","黄石市");
    city.add(wuhan);
    city.add(huangshi);
   }
   else if(provinceID=="2")
   {
    var chengdu = createSel("21","成都");
    var zhigong= createSel("22","自贡");
    city.add(chengdu);
    city.add(zhigong);
   }
  }
 }
 
 //根据选中市获取对应区
 function getCity(selcity)
 {
  var cityID=null;
  for(var i=0;i<selcity.length;i++)
  {
   if(selcity.options[i].selected)
   {
    cityID=selcity.options[i].value;
    break;
   }
  }
  if(cityID!=null)
  {
   var zone = document.forms[0].elements("selZone");
   clearSel(zone);
   if(cityID=="10")
   {
    var wuchang=createSel("101","武昌");
    var hanyang=createSel("102","汉阳");
    var hankou = createSel("103","汉口");
    zone.add(wuchang);
    zone.add(hanyang);
    zong.add(hankou);
   }
   else if(cityID=="11")
   {
    var xisai = createSel("201","西赛山");
    var huangshishi = createSel("202","黄石市内");
    zone.add(xisai);
    zone.add(huangshishi);
   }
   else if(cityID=="21")
   {
    var wuhou=createSel("210","武侯区");
    var jijiang=createSel("211","锦江区");
    zone.add(wuhou);
    zone.add(jijiang);
   }
   else if(cityID=="22")
   {
    var one = createSel("221","自贡城市一");
    var two= createSel("222","自贡城市二");
    zone.add(one);
    zone.add(two);
   }
  }
  
 
 }


 //创建option
 function createSel(value,text)
 {
  var optn = document.createElement("option");
  optn.value=value;
  optn.text= text;
  return optn;
 }
 //清空sel下拉
 function clearSel(sel)
 {
  if(sel != null)
  {
   while(sel.length >0)
   {
    sel.removeChild(sel.options[sel.length-1]);
   }
  }
 }
</script>
</head>


<body>


 <form name="form1">
  <center>
 <select name="selPro" οnchange="getPro(this)">
  <option value="0">--请选择--</option>
  <option value="1">湖北省</option>
  <option value="2">四川省</option>
 </select>
<br/><br/><br/><br/>
<select name="selCity" onChange="getCity(this)">
 <option>--请选择--</option>


</select>
<br/><br/><br/><br/>
<select name="selZone">


</select>
  </center>




 </form>
</body>


</html>
浪客剑芯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 三级联动的实现
嘤其鸣矣，求其友声
01-15 823
最近项目用用到了“添加商品”，商品有所属商品、一级类目、二级类目等，从而构成了三个级别，为了提升用户体验，做了如下的三级联动准备工作： 一、获取后台数据，public class MenuJSON { public static void GetMenuJsonData(HttpServletRequest request) { User user = (User) requ
JavaScript的三级联动
ScumStudy的博客
09-09 361
<select id="provice"> <option value="-1">请选择</option> </select> <select id="city"></select> <select id="country"></select> <script> //创建数组保存各个省份城市地区 //省份：一维数组 v..
JavaScript的三级联动（省 市 县）
Elenal的博客
05-24 1556
JavaScript下的省市县三级联动
JS实现三级联动
qq_21615847的博客
08-01 2777
js实现三级联动
用js实现三级联动
最新发布
老余的博客
09-24 373
今天小编带你了解一下三级联动，所谓三级联动就是为了完成一些选择权利。
原生javascript AJAX 三级联动的实现代码
10-18
原生javascript AJAX三级联动的实现代码是一种常见的前端技术，它允许用户在一个下拉列表中选择一个选项时，会触发另一个下拉列表的更新，通常是基于第一个选择项的值。以下将详细介绍三级联动的实现知识点： 1. ...
JavaScript实现三级联动效果
10-19
本文详细介绍了如何使用JavaScript技术实现网页中的三级联动效果。三级联动是一种常见的交互界面设计，常应用于在线表单或数据查询等功能中，使得用户在选择第一级（省）后，第二级（市）和第三级（县/区）选项能...
JavaScript实现三级联动菜单实例代码
10-19
总结来说，这个JavaScript三级联动菜单的实现主要依赖于以下几个关键点： 1. 使用数据结构（数组）存储不同级别的选项。 2. 通过`<select>`的`onchange`事件监听用户的操作。 3. 根据用户选择更新下一级的选项列表...
JavaScript实现三级联动菜单效果
10-19
这个示例代码展示了如何使用JavaScript实现一个三级联动菜单的效果。在网页设计中，联动菜单常用于地区选择、产品分类等场景，用户的选择会直接影响下一级菜单的内容。在这个例子中，我们有三个级别的选择：省份、...
原生JavaScript写三级联动城市简单思路
方佳宇博客
12-06 2593
原生JavaScript写三级联动城市简单思路
js实现三级联动下拉列表
08-02
简单的三级联动菜单，可优化。。。。。。。。。。。。
使用JS实现三级联动
Youareseeing的博客
06-17 4675
利用js实现三级联动 直接放代码： 讲一下思路：1、首先需要获取所有省的数组，通过遍历得到省。for (let s of sequence) {}2、获取市的数组、再进行遍历得到市。注：需要根据省份的adcode值与你选择的省份值进行对比，然后得到所有市的数组，var provinceCheck=provinces.find(function(item){ return item.adco
用JavaScript实现三级联动
weixin_44960513的博客
05-09 981
代码如下: 请选择你的省份 请选择你的城市 请选择你的具体地址 运行效果:
javascript三级联动select
踏浪飞鸿的专栏
03-12 5300
数据库结构：   省份｛编号，名称｝：sheng｛ID，sheng｝   城市｛编号，所属省份，名称｝：shi｛ID，shengID，shi｝   区域｛编号，所属城市，名称｝：qu｛ID，shiID，qu｝ASP代码：!--#include file="conn.asp"-->script language="javascript">    var city=new Array(
JavaScript省市县三级联动——善良公社
生命不止 学无止境
12-22 7822
在做善良公社网的搜索页面时，涉及到窗体加载时，显示整个省，根据选择的省，出现该省下面的市，根据市，出现该市下面的地区。效果图如下：                                          那么是怎么实现的呢？ 前台HTML代码： 地区： --请选择省份-- <select id="city" onchange="setCounty(this.value);ge
JavaScript简单省市区的三级联动
youaremygirl1的博客
04-03 463
三级联动 <div> 省：<select style="width: 100px;" id="sheng" onchange="Select1()"><option value="-1">-请选择-</option></select> 市：<select style="width: 100px;" id="shi" o...
JavaScript-三级联动的详细操作
苛性钠的博客
12-29 754
三级联动之用户选取省-市-区的案例分析 1.基础–html+css布局 布局根据实际项目需求，一下仅为案例参考： <ul class="box"> <li><span>省份：</span><select name="pro" id="pro"></select></li> <li><span>城市：</span><select name="c
【JavaScript】全国城市三级联动
大海的博客
07-13 422
全部代码： 三级城市联动 var shengData= [ ['湖南省','hn'], ['广东省','gd'], ['北京市','bj'], ['河北省','hb'] ]; var cityDate=new Array; cityDate[1]=[
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值