CSharp:Fill a Select/Option from Json with jQuery

 

https://github.com/Apress/pro-asp.net-core-6
https://github.com/Apress/pro-asp.net-core-3

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="DuUeditor.WebForm2" %>
 
<!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 runat="server">
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Fill a Select/Option from Json with jQuery</title>
     <meta name="author" content="Geovin Du,塗聚文">
     <meta name="keyword" content="塗聚文">
     <meta name="description" content="涂聚文">
    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript">
        var items = [];
        var du;
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                url: "DuGetData.ashx",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                // data: data,
                success: function (data) {
                    console.log(data);
                    //var du = JSON.parse(data);
                    //console.log(data.length);
                    $.each(data, function (key, val) {
                        items.push("<li id='" + key + "'>" + val + "</li>");
                        console.log(val);
                        //du = JSON.parse(val);
                       // console.log(du);
                        $("#MyList").addItems(data);
                        $("#<%= DropDownList1.ClientID %>").addItems(data);
                    });
 
                    $.each(data, function (index, item) {
                        console.log(item);
 
                        console.log(item.id);
                    });
 
                    /*  $.each($.parseJSON(data), function (idx, obj) {
                    console.log(obj.id);
                    alert(obj.id);
                    });*/
                }
            });
        });
 
 
        $.fn.addItems = function (data) {
            return this.each(function () {
                var list = this;
                $.each(data, function (index, itemData) {
                    var option = new Option(itemData.realname, itemData.id);
                    list.add(option);
                });
            });
        };
 
        $("#MyList").change(function () {
            alert('you selected ' + $(this).val());
        });
 
    </script>
</head>
<body>
 
    <form id="form2" runat="server">
    <div>
    <select id="MyList" runat="server" />
        <asp:DropDownList ID="DropDownList1" runat="server" CssClass="geovindu"/>
         <br />
        <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
    </div>
    </form>
  
</body>
</html>

　　

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="DuUeditor.WebForm1" ValidateRequest="false" EnableEventValidation="false" %>
 
<!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 runat="server">
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Fill a Select/Option from Json with jQuery</title>
     <meta name="author" content="Geovin Du,塗聚文">
     <meta name="keyword" content="塗聚文">
     <meta name="description" content="涂聚文">
    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript">
        var items = [];
        var du;
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                url: "/WebForm1.aspx/gvAjax",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                // data: data,
                success: function (data) {
                    console.log(data);
                    //var du = JSON.parse(data);
                    //console.log(data.length);
                    $.each(data, function (key, val) {
                        items.push("<li id='" + key + "'>" + val + "</li>");
                        console.log(val);
                        du = JSON.parse(val);
                        console.log(du);
                        $("#MyList").addItems(du);
                        $("#<%= DropDownList1.ClientID %>").addItems(du);
                    });
 
                    $.each(du, function (index, item) {
                        console.log(item);
 
                        console.log(item.id);
                    });
 
                    /*  $.each($.parseJSON(data), function (idx, obj) {
                    console.log(obj.id);
                    alert(obj.id);
                    });*/
                }
            });
        });
 
 
        $.fn.addItems = function (data) {
            return this.each(function () {
                var list = this;
                $.each(data, function (index, itemData) {
                    var option = new Option(itemData.realname, itemData.id);
                    list.add(option);
                });
            });
        };
 
        $("#MyList").change(function () {
            alert('you selected ' + $(this).val());
        });
 
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <select id="MyList" runat="server" />
        <asp:DropDownList ID="DropDownList1" runat="server" CssClass="geovindu"/>
         <br />
        <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
    </div>
    </form>
</body>
</html>

　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
/// <summary>
   /// geovindu,Gevoin Du
   ///
   /// </summary>
   public partial class WebForm1 : System.Web.UI.Page
   {
 
 
       /// <summary>
       ///
       /// </summary>
       /// <returns></returns>
       [WebMethod]
      public static string gvAjax()
      {
          List<Person> gvlist = new List<Person>();
          Person pn = new Person { id = 1, realname = "geovindu" };
          gvlist.Add(pn);
          pn = new Person { id = 2, realname = "geovindu2" };
          gvlist.Add(pn);
          pn = new Person { id = 3, realname = "geovindu3" };
          gvlist.Add(pn);
          pn = new Person { id = 4, realname = "geovindu4" };
          gvlist.Add(pn);
          var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
          var json1 = serializer.Serialize(gvlist).ToString();
          return json1;
      }
       /// <summary>
       ///
       /// </summary>
       /// <param name="sender"></param>
       /// <param name="e"></param>
       protected void Page_Load(object sender, EventArgs e)
       {
           if (!Page.IsPostBack)
           {
               //绑定数据;
           }
       }
       [WebMethod]
       protected void Button1_Click(object sender, EventArgs e)
       {
          // Response.Write(MyList.Value);
 
           Response.Write(DropDownList1.SelectedValue);
          // MyList.InnerText;
       }
 
 
 
 
   }
 
 
   /// <summary>
   ///
   /// </summary>
   public class Person
   {
 
       /// <summary>
       ///
       /// </summary>
       public int id { get; set; }
       /// <summary>
       ///
       /// </summary>
       public string realname { get; set; }
   }

　

jTable
https://jtable.org/Demo/PagingAndSorting
https://github.com/volosoft/jtable
https://jtable.org/Home/Downloads
https://www.c-sharpcorner.com/uploadfile/f9935e/jqueryjson-multi-select-combo-box-drop-down-list-control/
https://weblogs.asp.net/jdanforth/fill-a-select-option-from-json-with-jquery

　

　

posted @   ®Geovin Du Dream Park™  阅读(22)  评论(0)  编辑  收藏  举报
相关博文：
·  JavaScript: Data Structures
·  CSharp: XML Serialize and Deserialize
·  JavaWeb知识总结
·  cxselect的简单使用/ajax无限联动
·  Layui动态添加select下拉框内容
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
历史上的今天：
2017-06-16 sql server: Graphs, Trees, Hierarchies and Recursive Queries
2011-06-16 C# QQ weather (二)
2011-06-16 C# QQ weather
2011-06-16 C# Windows Forms TreeView SelectedNode(VS2008)
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示