jQuery 下拉框三级联动

代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <meta charset="utf-8" />
  <script type="text/javascript" src="../js/jquery-1.11.3.js" ></script>
  <style type="text/css">
    body {
      font-size:15px;
    
    }
    div {
      width:400px;
      height:20px;
      border:1px solid #000000;
      background-color:#ddd;
     
      padding:10px;
    }
  </style>
  <script type="text/javascript">
    $(function () {
      function Init(node) {
        return node.html("<option>---请选择---</option>");
      }
　　　　　　　//多维数组做数据来源
      var db = {
        广东: {
          珠海市: "珠海县1,珠海县2,珠海县3",
          深圳市: "深圳县1,深圳,深圳县3",
          广州市:"广州县1,广州县2,广州县3",
        },
        广西: {
          南宁市: "南宁县1,南宁县2,南宁县3",
          百色市: "百色县1,百色县2,百色县3",
          桂林市: "桂林县1,桂林县2,桂林县3",
        },
        江西: {
          市1: "县1,县2,县3",
          市2: "县1,县2,县3",
          市3: "县1,县2,县3",
        }
      };
　　　　　　　　//初始化select节点
      $.each(db, function (changShang) {
        $("#selF").append("<option>" + changShang + "</option>");
      })
      //一级变动
      $("#selF").change(function () {
        //清空二三级
        Init($("#selB"));
        Init($("#selC"));
        $.each(db,function (cs,pps) {
          if ($("#selF option:selected").text() == cs) {
            $.each(pps, function (pp, xhs) {
              $("#selB").append("<option>" + pp + "</option>");
            });
            $("#selB").change(function () {
              Init($("#selC"));
              $.each(pps, function (pp,xhs) {
                if ($("#selB option:selected").text()==pp) {
                  $.each(xhs.split(','), function () {
                    $("#selC").append("<option>" + this + "</option>");
                  })
                }
              })
            })
          }
        })
      })
 
    })
  </script>
</head>
<body>
    <h2>三级联动：省、市、县</h2>
  <div class="bg-primary">

           省：<select id="selF">
        <option>--请选择--</option>  
    </select>
        市：<select id="selB">
        <option>--请选择--</option>  
    </select>
        县：<select id="selC">
        <option>--请选择--</option>  
    </select>
    <p id="pid"></p>
  </div>
</body>
</html>
结果：
jQuery 下拉框三级联动

猜你喜欢
