zoukankan      html  css  js  c++  java

  • JSON省市联动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="Area_mini.js" type="text/javascript"></script>
    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(    function() {
        $(    "#areaProvince").change(function() {
            LoadCity2();
                //LoadCounty();
        });
         LoadArea2(    '辽宁', '沈阳');
    });

    function LoadArea2(prov, city) {
        LoadProvince(prov);
        LoadCity2(city);
    }
    function LoadArea3(prov, city, County) {
        LoadProvince(prov);
        LoadCity3(city);
        LoadCounty(County);
    }
    function LoadProvince(values) {
        $(    "#areaProvince").empty();
            for (var id in countryAreaData) {
            $(    "#areaProvince").append(" <option value='" + id + "'>" + id + "</option>");
        }
            if (typeof(values) == "string") {
            $(    "#areaProvince option[value=" + values + "]").attr("selected", true)
        }
    }
    function LoadCity3(values) {
        $(    "#areaCity").empty();
        $(    "#areaCounty").empty();
            var s1 = $("#areaProvince option:selected").val();
            for (var id2 in countryAreaData[s1]) {

            $(    "#areaCity").append(" <option value='" + id2 + "'>" + id2 + "</option>");
        }
            if (typeof(values) == "string") {
            $(    "#areaCity option[value=" + values + "]").attr("selected", true)
        }
    }
    function LoadCity2(values) {
        $(    "#areaCity").empty();
            var s1 = $("#areaProvince option:selected").val();
            for (var id2 in countryAreaData[s1]) {
            $(    "#areaCity").append(" <option value='" + id2 + "'>" + id2 + "</option>");
        }
            if (typeof(values) == "string") {
            $(    "#areaCity option[value=" + values + "]").attr("selected", true)
        }
    }

    function LoadCounty(values) {
        $(    "#areaCounty").empty();
            var str1 = $("#areaProvince option:selected").val();
            var str2 = $("#areaCity option:selected").val();

            for (i = 0; i < countryAreaData[str1][str2].length; i++) {
            str     = countryAreaData[str1][str2][i];
            $(    "#areaCounty").append(" <option value='" + str + "'>" + str + "</option>");
        }
            if (typeof(values) == "string") {
            $(    "#areaCounty option[value=" + values + "]").attr("selected", true)

        }
    }
    </script>
    <title>无标题文档</title>
    </head>

    <body>
    <select id="areaProvince" name="areaProvince" style=" 100px">
            <option value="0">省份</option>
    </select>
    <select id="areaCity" name="areaCity" style=" 120px">
            <option value="0">地级市</option>
    </select>

    </body>
    </html>

    源码下载
  • 相关阅读:
    JavaScript语言和jQuery技术--2
    Mybatis框架--1
    数据接口请求异常：parsererror
    Callable和Future？
    如何实现拦截器？
    window.onload()函数和jQuery中的document.ready()有什么区别？
    SpringBoot框架 1.什么是 Spring Boot？
    什么是 JavaConfig？
    jquery中$.get()提交和$.post()提交有区别吗？
    什么是线程？
  • 原文地址：https://www.cnblogs.com/skyblue/p/2116211.html
Copyright © 2011-2022 走看看