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

本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码,运行效果如下图所示:

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

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

(0)

相关推荐

  • javascript支持区号输入的省市二级联动下拉菜单

    省市二级联动下拉菜单,增加了区号输入.多组选项共用一组数据. 选择地区,可以获取区号,填写区号自动选取地区. 某些地市的区号收集中. 省份 选择城区 1)inti(0);findarea();"> 省份 选择城区 1)inti(1);findarea();"> var areaList={ "北京":[["选择城区","10"],["东城区",""],["西城区&q

  • jquery+json 通用三级联动下拉列表

    Author: shaoyun Email: shaoyun (at) yeah.net Date: 2010-03-10 02:03 Blog: http://shaoyun.cnblogs.com/ 用Jquery实现,原始代码只支持IE,这里我改了一下,我的代码里面有三个版本的实现 第一个是通过读取XML构建,支持IE/firefox,chrome不支持,有兴趣的可以将读取XML的部分改成AJAX的方式,这样chrome支持就不成问题 第二个是采用Json数据格式构建,是我的第二次尝试改进

  • js实现全国省份城市级联下拉菜单效果代码

    本文实例讲述了js实现全国省份城市级联下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一个大家都知道的网页小功能,很常见,全国省份与城市级联菜单,采用Select下拉的方式选择数据,不过现在很多都Ajax了,貌似这种老形式已经过时了,不过在兼容性方面,仍然是不落后的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-conv-city-xl-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLI

  • js操作二级联动实现代码

    表结构 二级或多级联动主要是以数据库中具有父编号的表为基础,这个也不例外 id,parent_id,name 三列. 采用js操作 先说下数据在js中的存储方式. 主要用二维数组来存储数据.结构如下: a[父编号]=[[子编号1,子名称1],[子编号2,子名称2],[子编号3,子名称3],--]; 首先用父编号获取所有的子数据,在把子数据的编号及名称绑定在dropdown中 第一步 二级联动数据(后面说这些数据怎么得到) 复制代码 代码如下: var cities=new Array(); ci

  • 最好用的省市二级联动 原生js实现你值得拥有

    复制代码 代码如下: <script language=javascript> cities = new Object(); cities['台湾']=new Array('台北','台南','其他'); cities['马来西亚']=new Array('Malaysia'); cities['北京']=new Array('北京'); cities['上海']=new Array('上海'); cities['天津']=new Array('天津'); cities['重庆']=new A

  • 基于javascript实现全国省市二级联动下拉选择菜单

    本文实例讲述了js实现全国省市二级联动下拉选择菜单,分享给大家供大家参考.具体如下: 效果图: 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript"&g

  • javascript实现省市区三级联动下拉框菜单

    本文实例讲述了javascript实现省市区三级联动下拉框菜单代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 使用QQ的省市区数据 --> <!-- <script type="text/javascript" src="http:/

  • 全国省市二级联动下拉菜单 js版

    本文实例为大家分享了js实现二级联动下拉菜单的具体代码,供大家参考,具体内容如下 js代码部分: /* * 全国二级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,iArray){ this.Items[id] = iArray; } Dsy.prototype.Exists = function(id){ if(typeof(this.Items[id]) == "undefined&

  • JS制作简单的三级联动

    用javascript制作的一个简单三级联动,非常简单实用 复制代码 代码如下: <!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title></title>     </head>     <body>         省:         <select style="wi

  • js实现的全国省市二级联动下拉选择菜单完整实例

    本文实例讲述了js实现的全国省市二级联动下拉选择菜单.分享给大家供大家参考.具体如下: 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-province-city-cho-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

随机推荐