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 相关文章推荐
javascript xml为数据源的下拉框控件
Jul 07 Javascript
jquery xMarquee实现文字水平无缝滚动效果
Apr 29 Javascript
vue2.0开发实践总结之疑难篇
Dec 07 Javascript
JS重载实现方法分析
Dec 16 Javascript
Angular的$http与$location
Dec 26 Javascript
AngularJS入门示例之Hello World详解
Jan 04 Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 Javascript
浅谈Angular路由复用策略
Oct 04 Javascript
详解 微信小程序开发框架(MINA)
May 17 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 Javascript
微信小程序实现搜索功能
Mar 10 Javascript
JS 4个超级实用的小技巧 提升开发效率
Oct 05 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
写一个用户在线显示的程序
2006/10/09 PHP
PHP新手上路(三)
2006/10/09 PHP
php字符串截取问题
2006/11/28 PHP
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
PHP strncasecmp字符串比较的小技巧
2011/01/04 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
原生JS实现的碰撞检测功能示例
2018/05/18 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
利用python求相邻数的方法示例
2017/08/18 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
Python实现快速排序的方法详解
2019/10/25 Python
Python socket模块方法实现详解
2019/11/05 Python
Python爬虫之爬取淘女郎照片示例详解
2020/07/28 Python
说出数据连接池的工作机制是什么?
2013/04/19 面试题
大学学生会主席竞选稿
2015/11/19 职场文书
python实现ROA算子边缘检测算法
2021/04/05 Python