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>

  • 相关阅读:
    antd pro v5安装并运行完整demo的方法
    react项目运行在微信公众号
    nginx服务器上部署react项目
    毕业后,初入社会的困境和挣扎
    win10系统无法执行exe文件,解决方法
    前端学习11.14
    前端学习11.13
    Struts学习-Hibernate2
    Struts学习-Hibernate
    Struts2学习-自动
  • 原文地址:https://www.cnblogs.com/tuifeideyouran/p/3861770.html
Copyright © 2011-2022 走看看