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下查找父节点的简单方法
Aug 13 Javascript
自己封装的javascript事件队列函数版
Jun 12 Javascript
JavaScript中检查对象property的存在性方法介绍
Dec 30 Javascript
jQuery表单域属性过滤器用法分析
Feb 10 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
ionic2自定义cordova插件开发以及使用(Android)
Jun 19 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
Vue验证码60秒倒计时功能简单实例代码
Jun 22 Javascript
JS操作json对象key、value的常用方法分析
Oct 29 Javascript
Vue表单控件数据绑定方法详解
Feb 05 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
Jul 28 Javascript
浅析VUE防抖与节流
Nov 24 Vue.js
详解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 文章中的远程图片采集到本地的代码
2009/07/30 PHP
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
php自动识别文件编码并转换为UTF-8的方法
2014/06/12 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
Chrome中模态对话框showModalDialog返回值问题的解决方法
2010/05/25 Javascript
JQuery优缺点分析说明
2011/04/10 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
2011/07/08 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
JavaScript 学习笔记之操作符
2015/01/14 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
js构建二叉树进行数值数组的去重与优化详解
2018/03/26 Javascript
小程序实现留言板
2018/11/02 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
python开发之thread线程基础实例入门
2015/11/11 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
详解python logging日志传输
2020/07/01 Python
简单了解python关键字global nonlocal区别
2020/09/21 Python
大学校庆策划书
2014/01/31 职场文书
开朗女孩的自我评价
2014/02/10 职场文书
《与象共舞》教学反思
2014/02/24 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
大学军训自我鉴定大全
2014/09/18 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
实现GO语言对数组切片去重
2022/04/20 Golang