码迷,mamicode.com
首页 > Web开发 > 详细

js绑定下拉框

时间:2017-10-27 19:56:07      阅读:235      评论:0      收藏:0      [点我收藏+]

标签:button   cat   content   nbsp   move   java   key   rem   option   

---恢复内容开始---

js部分

Js代码 1  <script type="text/javascript">
        $(function () {
            $("#btnGet").click(function () {
                $.ajax({
                    url: "GetDatas.ashx",
                    type: "Post",
                    contentType: "application/json",
                    dataType: "json",
                    success: function (data) {
                        var ddl = $("#ddlDatas");

                        //删除节点
                        RemoveOption();

                        //方法1:添加默认节点 
                        ddl.append("<option value=‘-1‘>--请选择--</option>");

                        //方法2:添加默认节点
                        //ddl[0].options.add(new Option("--请选择--", "-1"));

                        //转成Json对象
                        var result = eval(data);

                        //循环遍历 下拉框绑定
                        $(result).each(function (key) {
                            //第一种方法
                            var opt = $("<option></option>").text(result[key].ProName).val(result[key].ProID);
                            ddl.append(opt);

                            //第二种方法
                            // var proid = result[key].ProID;
                            // var proname = result[key].ProName;
                            //调用自定义方法
                            //AppendOption(proid, proname);
                         });

                            //第三种方法
                            //$.each(result, function (key, value) {
                            //alert("dd");
                            //var op = new Option(value.ProName, value.ProID);
                            // ddl[0].options.add(op);
                       // });
                    },
                    error: function (data) {
                        alert("Error");
                    }
                });
            });

           
        });

        function RemoveOption() {
            $("#ddlDatas option").remove();
        }

        function AppendOption(value, text) {
            $("#ddlDatas").append("<option value=‘" + value + "‘>"+ text + "</option>");
       }
    </script>

html部分

Html1 <body>
    <form id="form1" runat="server">
    <div>
        <asp:DropDownList ID="ddlDatas" name="prov" runat="server" style="width:200px;">
        </asp:DropDownList>
      <input type="button" id="btnGet" value="获取数据" />
    </div>
    </form>
</body>

ajax部分

         using Newtonsoft.Json; 


       DataTable dt = ds.Tables[0];
       string dtg = JsonConvert.SerializeObject(dt);
       context.Response.Write(dtg);    
        context.Response.End();           

 

(此内容仅自己收藏查阅。若侵犯布者利益 ,请与我联系删除)

内容选自  http://www.cnblogs.com/holyknight-zld/archive/2012/10/23/Json_Bind_DropDownList.html

---恢复内容结束---

js绑定下拉框

标签:button   cat   content   nbsp   move   java   key   rem   option   

原文地址:http://www.cnblogs.com/1439107348s/p/7744859.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!