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 相关文章推荐
总结AJAX相关JS代码片段和浏览器模型
Aug 15 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
Mar 19 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
Jul 04 Javascript
JavaScript模板引擎用法实例
Jul 10 Javascript
jQuery多条件筛选如何实现
Nov 04 Javascript
js实现符合国情的日期插件详解
Jan 19 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
微信小程序实现留言板
Oct 31 Javascript
jQuery实现二级导航菜单的示例
Sep 30 jQuery
详解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/06/14 PHP
php数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
三种php连接access数据库方法
2013/11/11 PHP
浅谈php的优缺点
2015/07/14 PHP
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
再谈javascript原型继承
2014/11/10 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
Node.js  事件循环详解及实例
2017/08/06 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
关于vue属性使用和不使用冒号的区别说明
2020/10/22 Javascript
[02:10]探秘浦东源深体育馆 DOTA2 Supermajor不见不散
2018/05/17 DOTA
Python基于smtplib实现异步发送邮件服务
2015/05/28 Python
python实现class对象转换成json/字典的方法
2016/03/11 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
python实现学生管理系统开发
2020/07/24 Python
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
教育学习自我评价
2014/02/03 职场文书
国际金融专业自荐信
2014/07/05 职场文书
交通安全教育心得体会
2016/01/15 职场文书
《三国志》赏析
2019/08/27 职场文书
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js