js綁定下拉框

本文轉載自查看原文 2017-10-27 19:15 2636 JS&CSS

---恢復內容開始---

方法一

js-ajax部分

   function GetDListOfCt() {
        $.ajax({
            url: "../../Ajax/Boss_Show.ashx?type=GetCtName",
            data: {},
            type: "post",
            dataType: "json",
            success: function (data) {
                var ddl = $("#ddlCaption");
                         for (var i = 0; i < data.length; i++) {
                                       var text = data[i].RealName;
                       var value = data[i].id ;
                     document.getElementById('ddlCaption').add(new Option(text, value));//綁定DropDownList的value值，text值
                   }
                       
            },
        });
    }

方法二

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

---恢復內容結束---

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js綁定下拉框數據源 Ajax獲取Json對象綁定下拉框 Ajax獲取Json對象綁定下拉框 easyui 綁定下拉框，下拉框選擇改變事件的觸發方法 vue select 動態綁定下拉框-設置默認值 Select級聯菜單，用Ajax獲取Json綁定下拉框（jQuery） Excel應該這么玩——4、命名區域：搞定下拉框 JS封裝的下拉框 JS下拉框年月 layui綁定聯動下拉框