zoukankan      html  css  js  c++  java
  • 省份、城市、区县三级联动Html代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
    $(function(){
    function objInit(obj){
    return $(obj).html("<option>请选择</option>");
    }
    var arrData = {
    江西省:{宜春市: "袁州区,万载县",
    品牌1_2: "型号1_2_1,型号1_2_2"},
    湖南省:{邵阳市: "邵阳县,型号2_1_2",
    品牌2_2: "型号2_2_1,型号2_2_2"},
    厂商3:{品牌3_1: "型号3_1_1,型号3_1_2",
    品牌3_2: "型号3_2_1,型号3_2_2"},
    };
    $.each(arrData, function(pF){
    $("#selF").append("<option>"+pF+"</option>");
    });
    $("#selF").change(function(){
    objInit("#selT");
    objInit("#selC");
    $.each(arrData, function(pF, pS){
    if($("#selF option:selected").text()==pF){
    $.each(pS, function(pT, pC){
    $("#selT").append("<option>"+pT+"</option>");
    });
    $("#selT").change(function(){
    objInit("#selC");
    $.each(pS, function(pT, pC){
    if($("#selT option:selected").text()==pT){
    $.each(pC.split(","),function(){
    $("#selC").append("<option>"+this+"</option>");
    });
    }
    });
    });
    }
    });
    });
    $("#Button1").click(function(){
    var strValue = "您选择的省份:";
    strValue += $("#selF option:selected").text();
    strValue += "&nbsp;您选择的城市:";
    strValue += $("#selT option:selected").text();
    strValue += "&nbsp;您选择的区县:";
    strValue += $("#selC option:selected").text();
    $("#divTip").show().html(strValue);
    });
    })
    </script>
    </head>
    <body>
    <div class="clsInit">
    省份:<select id="selF"><option>请选择</option></select>
    城市:<select id="selT"><option>请选择</option></select>
    区县:<select id="selC"><option>请选择</option></select>
    <input id="Button1" type="button" value="查询" class="btn"/>
    </div>
    <div class="clsInit" id="divTip"></div>
    </body>
    </html>

  • 相关阅读:
    BoundsChecker使用
    完成端口(Completion Port)详解
    VC内存泄露检查工具:VisualLeakDetector
    AcceptEx函数与完成端口的结合使用例子
    IOCP之accept、AcceptEx、WSAAccept的区别
    Visual C++ 6.0安装
    eclipse中在线安装FindBugs
    几种开源SIP协议栈对比
    全情投入是做好工作的基础——Leo鉴书39
    CheckStyle检查项目分布图
  • 原文地址:https://www.cnblogs.com/tuifeideyouran/p/3861770.html
Copyright © 2011-2022 走看看