jquery-editable-select 在 asp.net 下拉列表中不起作用

Question

我正在尝试在asp.net dropdownlist工具中实现jquery-editable-select，但它不工作，而同样的事情是html select dropdownlist中的working

这是 Html Select Dropdownlist 的代码，运行完美

<link href="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css" rel="stylesheet">
<select id="cmb_year">
    <option>Alfa Romeo</option>
    <option>Audi</option>
    <option>BMW</option>
    <option>Citroen</option>
</select>
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
<script>
    $('#cmb_year').editableSelect();
</script>

现在 asp.net dropdownlist 的相同代码不起作用。这是代码。

<link href="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css" rel="stylesheet">

<asp:DropDownList id="cmb_year" runat="server"></asp:DropDownList>

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
<script>
    $('#cmb_year').editableSelect();
</script>

这是aspx.cs代码（下拉列表是动态绑定的）

service.BindDropdownList(cmb_year, "tbl_year", "year", "Id", "order by Id desc");

有什么方法可以将 html 选择下拉列表转换为 asp.net 可编辑下拉列表吗？

Answer 1

有许多 jquery 实用程序，例如 jQuery 多选和其他一些？

它们通常不能很好地与 asp.net DropDropdown 列表控件配合使用。

但是，（值得庆幸的是），大多数 ASP.NET 控件无论如何都只是 HTML 控件的子类。

您所需要的只是将 runat="server" 添加到 HTML 选择控件，现在它的行为与 asp.net DropDownList 控件非常相似。这包括数据绑定的能力，还包括 DataValueField 和 DataTextField（因此，您甚至可以在选择下拉列表时拥有一个显示列和一个隐藏的数据库 PK 列。

所以，尝试这个标记：

    <title></title>

    <script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
    <link href="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css" rel="stylesheet" />


</head>
<body>
    <form id="form1" runat="server">
        <div>

        <select id="cmb_year" runat="server"
            datatextfield="AutoMaker"
            >
        </select>

        <script>
            $('#cmb_year').editableSelect();
        </script>


        </div>
    </form>
</body>

背后的代码：

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            LoadData();
    }


    void LoadData()
    {
        // fake a data source
        DataTable rstData = new DataTable();
        rstData.Columns.Add("AutoMaker");

        DataRow MyRow = rstData.NewRow(); MyRow["AutoMaker"] = "Alfa Romeo";
        rstData.Rows.Add(MyRow);

        MyRow = rstData.NewRow(); MyRow["AutoMaker"] = "Audi";
        rstData.Rows.Add(MyRow);

        MyRow = rstData.NewRow(); MyRow["AutoMaker"] = "BMW";
        rstData.Rows.Add(MyRow);

        MyRow = rstData.NewRow(); MyRow["AutoMaker"] = "Citroen";
        rstData.Rows.Add(MyRow);

        cmb_year.DataSource = rstData;  
        cmb_year.DataBind();    


    }

您不需要进行数据绑定，因此当您添加 runat="server" 标记时，数据文本和数据值选项都可用于 HTML 选择控件。

以上结果如下：

jquery-editable-select 在 asp.net 下拉列表中不起作用

问题描述投票：0回答：1

1个回答

最新问题

jquery-editable-select 在 asp.net 下拉列表中不起作用

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1