js绑定下拉框

Posted 2020-10-12 楚景然

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js绑定下拉框相关的知识，希望对你有一定的参考价值。

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

方法一

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

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

以上是关于js绑定下拉框的主要内容，如果未能解决你的问题，请参考以下文章

45、vue select下拉框绑定默认值

wpf下拉框绑定怎么让他默认有选中项

下拉框select的值保存不生效

vue.js的select下拉框怎样绑定事件和取值

js改变下拉框内容

vue.js处理下拉框实践