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的表头固定的若干方法
Jan 27 Javascript
javascript实现上传图片并预览的效果实现代码
Apr 11 Javascript
Javascript动画效果(1)
Oct 11 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
Feb 20 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
May 11 Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
Jun 22 Javascript
微信小程序url传参写变量的方法
Aug 09 Javascript
详解Vue 项目中的几个实用组件(ts)
Oct 29 Javascript
微信小程序实现导航栏和内容上下联动功能代码
Jun 29 Javascript
vue自定义树状结构图的实现方法
Oct 18 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
第八节 访问方式 [8]
2006/10/09 PHP
php自定义函数之递归删除文件及目录
2010/08/08 PHP
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
PHP使用正则表达式获取微博中的话题和对象名
2015/07/18 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
理解Javascript闭包
2013/11/01 Javascript
Javascript获取当前时间函数和时间操作小结
2014/10/01 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
向JavaScript的数组中添加元素的方法小结
2015/10/24 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
关于vue.js中实现方法内某些代码延时执行
2019/11/14 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
python 网络编程详解及简单实例
2017/04/25 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
jupyter 使用Pillow包显示图像时inline显示方式
2020/04/24 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
2015年七一建党节慰问信
2015/03/23 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python
利用Python实现Picgo图床工具
2021/11/23 Python