简单实现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(); } }
ajax方法完成选择下拉框级联效果
最新推荐文章于 2020-10-29 22:09:03 发布