zoukankan      html  css  js  c++  java
  • jquery获取数据并生成下拉菜单

    jquery获取数据并生成下拉菜单,

    <script type="text/javascript">
        $(document).ready(function() {
            GetByJquery();
            $("#ddlProvince").change(function() { GetCity() });
            $("#ddlCity").change(function() { GetDistrict() });
        });
       
        function GetByJquery() {

            $("#ddlProvince").empty(); //清空省份SELECT控件

            $.getJSON("/ajax/GetProvinceList", function(data) {
                $.each(data, function(i, item) {
                    $("<option></option>")
                        .val(item["ProvinceID"])
                        .text(item["ProvinceName"])
                        .appendTo($("#ddlProvince"));
                });
                GetCity();
            });     

        }

        function GetCity() {

            $("#ddlCity").empty(); //清空城市SELECT控件
            var url ="/ajax/GetCityList/" + $("#ddlProvince").val();
            $.getJSON(url, function(data) {
                $.each(data, function(i, item) {
                    $("<option></option>")
                        .val(item["CityID"])
                        .text(item["CityName"])
                        .appendTo($("#ddlCity"));
                });
                GetDistrict();
            });
        }

        function GetDistrict() {
            $("#ddlDistrict").empty(); //清空市区SELECT控件
            var url = "/ajax/GetDistrictList/" + $("#ddlCity").val();
           
            $.getJSON(url, function(data) {
                $.each(data, function(i, item) {
                    $("<option></option>")
                        .val(item["DistrictID"])
                        .text(item["DistrictName"])
                        .appendTo($("#ddlDistrict"));
                });
            });
        }

    </script>

  • 相关阅读:
    【Javascript】javascript学习 三十二 JavaScript 表单验证
    【Javascript】javascript学习 三十四 JavaScript 图像地图
    【Javascript】javascript学习 三十三 JavaScript 动画
    【Javascript】javascript学习 三十六 创建你自己的 JavaScript 对象
    【Javascript】javascript学习 三十七 JavaScript 总结
    【HTML】HTML 教程(系列教程转载)
    【XML】XML概述(连载)
    【Javascript】javascript学习 三十五 JavaScript 计时
    【XML】XML教程
    判断各版本IE的HTML和CSS语句
  • 原文地址:https://www.cnblogs.com/ziye/p/2685080.html
Copyright © 2011-2022 走看看