ajax方法完成选择下拉框级联效果

最新推荐文章于 2021-03-26 06:13:07 发布

代码那点事ing

最新推荐文章于 2021-03-26 06:13:07 发布

阅读量1.1k

点赞数

分类专栏： jQuery ajax

本文链接：https://blog.csdn.net/qq_36925731/article/details/78358495

版权

jQuery 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

ajax

1 篇文章 0 订阅

订阅专栏

简单实现ajax方法完成选择下拉框级联效果
//html前台代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>ajax方法完成选择下拉框级联效果</title>
    <script src="Scripts/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $(function () {            
            $("#fruit1").change(add);
        })
        function add() {
            $("#fruit2").empty();
            $.ajax({
                url:"url/first-test.aspx",
                type: "GET",
                //向服务端传递数据
                data: $("#fruit1").serialize(),
                //接收数据类型
                dataType: "text",
                success: function (data) {
                    var arr = data.split(" ");
                    for (var i = 0; i < arr.length; i++) {
                        $("#fruit2").append("<option>" + arr[i] + "</option>");
                    }
                }
            });
        }                                                    
    </script>
</head>
<body>
    <select id="fruit1" name="fruit">
        <option>水果</option>
        <option>饮料</option>
    </select>
    <select id="fruit2">
        <!--<option></option>-->
    </select>
</body>
</html>


//asp后端代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class url_first_test : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string fruit = Request.Params["fruit"];
        if (fruit == "水果")
        {
            Response.Write("苹果 西瓜 芒果");
        }
        if (fruit == "饮料") {
            Response.Write("可乐 雪碧 奶茶");
        }       
        Response.End();
    }
}