JavaScript实现的级联算法示例【省市二级联动功能】_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代码运行工具：测试上述代码，运行效果如下图所示：