JavaScript实现的级联算法示例【省市二级联动功能】


Posted in Javascript onDecember 25, 2018

本文实例讲述了JavaScript实现的级联算法。分享给大家供大家参考,具体如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>LinkDemo</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    </script>
    <script type="text/javascript">
      var shengshiString = "1_山东省-11_德州市+12_青岛市+13_济南市~2_河北省-21_邯郸市*211_临漳县/212_磁县+22_石家庄市*221_定县/222_宁县+23_保定市";
      $(document).ready(function(){
        init();
      });
      function init(){
        var shengArray = shengshiString.split("~");
        for (var i = 0; i < shengArray.length; i++) {
          var sheng = shengArray[i].split("-")[0];
          var shi = shengArray[i].split("-")[1];
          var shengid = sheng.split("_")[0];
          var shengName = sheng.split("_")[1];
          var Newoption = $("<option></option>");
          $(Newoption).val(shengid);
          $(Newoption).text(shengName);
          $("#sheng").append(Newoption);
          if (i == 0) {
            shengchange(shengid);
          }
        }
      }
      function shengchange(shengidparam){
        $("#shi").empty();
        var shengArray = shengshiString.split("~");
        for (var i = 0; i < shengArray.length; i++) {
          var shengString = shengArray[i].split("-")[0];
          var shiString = shengArray[i].split("-")[1];
          var shengId = shengString.split("_")[0];
          if (shengidparam == shengId) {
            var shiArray = shiString.split("+");
            for (var j = 0; j < shiArray.length; j++) {
              var shistring = shiArray[j].split("*")[0];
              var shi = shistring;
              var shiId = shi.split("_")[0];
              var shiName = shi.split("_")[1];
              var Newoption = $("<option></option>");
              $(Newoption).val(shiId);
              $(Newoption).text(shiName);
              $("#shi").append(Newoption);
              if (shiName == "邯郸市" || shiName == "石家庄市") {
                shichange(shiId);
              }
            }
          }
        }
      }
      function shichange(shiidparam){
        $("#xian").empty();
        var shengArray = shengshiString.split("~");
        for (var i = 0; i < shengArray.length; i++) {
          var shengString = shengArray[i].split("-")[0];
          var shiString = shengArray[i].split("-")[1];
          var shengId = shengString.split("_")[0];
          var shiArray = shiString.split("+");
          for (var j = 0; j < shiArray.length; j++) {
            var shistring = shiArray[j].split("*")[0];
            var xianarray = shiArray[j].split("*")[1];
            var shi = shistring;
            var shiId = shi.split("_")[0];
            var shiName = shi.split("_")[1];
            if (shiId == shiidparam) {
              var xian = xianarray.split("/");
              for (var s = 0; s < xian.length; s++) {
                var xianId = xian[s].split("_")[0];
                var xianName = xian[s].split("_")[1];
                var Newoption = $("<option></option>");
                $(Newoption).val(xianId);
                $(Newoption).text(xianName);
                $("#xian").append(Newoption);
              }
            }
          }
        }
      }
    </script>
  </head>
  <body>
    <select id="sheng" onchange="shengchange(this.value)">
    </select>
    <select id="shi" onchange="shichange(this.value)">
    </select>
    <select id="xian">
    </select>
  </body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,运行效果如下图所示:

JavaScript实现的级联算法示例【省市二级联动功能】

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery 应用代码 方便的排序功能
Feb 06 Javascript
ASP中Sub和Function的区别说明
Aug 30 Javascript
js下将字符串当函数执行的方法
Jul 13 Javascript
js修改原型的属性使用介绍
Jan 26 Javascript
JS中操作JSON总结
Dec 06 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
移动端js图片查看器
Nov 17 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
Mar 04 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
Aug 30 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
创建echart多个联动的示例代码
Nov 23 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 Javascript
详解vuex commit保存数据技巧
Dec 25 #Javascript
bootstrap table实现合并单元格效果
Dec 24 #Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 #Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 #Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 #Javascript
Vue.js组件高级特性实例详解
Dec 24 #Javascript
JavaScript模板引擎原理与用法详解
Dec 24 #Javascript
You might like
php+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
PHP实时显示输出
2008/10/02 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
php静态文件生成类实例分析
2015/01/03 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
JS简单操作select和dropdownlist实例
2014/11/26 Javascript
js仿微信语音播放实现思路
2016/12/12 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
jQuery实现对网页节点的增删改查功能示例
2017/09/18 jQuery
JS实现简单的浮动碰撞效果示例
2017/12/28 Javascript
JS实现将二维数组转为json格式字符串操作示例
2018/07/12 Javascript
JavaScript实现拖拽功能
2020/02/11 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
python实现定时发送qq消息
2019/01/18 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
查看keras的默认backend实现方式
2020/06/19 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
opencv 图像滤波(均值,方框,高斯,中值)
2020/07/08 Python
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
法国在线药房:1001Pharmacies
2021/03/07 全球购物
高中毕业自我鉴定
2013/12/16 职场文书
《胖乎乎的小手》教学反思
2014/02/26 职场文书
2014年学校卫生工作总结
2014/11/20 职场文书
综合素质自我评价评语
2015/03/06 职场文书
培训心得体会怎么写
2016/01/25 职场文书
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android