Question

我有一个带有MasterPage的项目。我在这里添加了内容页面名称AddEmployeeDetail.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeFile="AddEmployeeDetail.aspx.cs" Inherits="DeceasedSystem.AddEmployeeDetail" %>

在内容页面AddEmployeeDetail.aspx中，我有一个名为ddEmployeeName的下拉列表。在页面加载时，将从数据库中使用EmployeeName填充此下拉列表。这是HTML

<div class="form-group row">
                                <label for="name" class="col-4 col-form-label">Employee Name</label>
                                <div class="col-8">
                                    <asp:DropDownList ID="ddEmployeeName" runat="server" class="form-control here"></asp:DropDownList>
                                </div>
                            </div>

这是.cs文件代码

protected void Page_Load(object sender, EventArgs e)
    {
        ddEmployeeName.DataSource = LoadComboBoxEmployeeName();
        ddEmployeeName.DataTextField = "Name";
        ddEmployeeName.DataValueField = "Id";
        ddEmployeeName.DataBind();
        ddEmployeeName.Items.Insert(0, new ListItem("--Select--", "0"));
    }
    string CS = ConfigurationManager.ConnectionStrings["DeceasedDBCS"].ConnectionString;

    //Load ComboBox Company
    private DataTable LoadComboBoxEmployeeName()
    {
        DataTable dtFatherName = new DataTable();
        using (SqlConnection con = new SqlConnection(CS))
        {
            using (SqlCommand cmd = new SqlCommand("SELECT Id, Name FROM TableEmployeeMaster", con))
            {
                cmd.CommandType = CommandType.Text;
                con.Open();
                SqlDataReader r = cmd.ExecuteReader();
                dtFatherName.Load(r);
            }
        }
        return dtFatherName;

    }

我还在此AddEmployeeDetail.aspx内容页面中添加了一个脚本文件，

 <script>
    $(document).ready(function () {
     $("#ddEmployeeName").select2({
        placeholder: "Select an option",
        allowClear: true
     });
 });
</script>

以及Jquery.js和Select2.js文件的链接

<script src="js/jquery.js"></script>
<script src="js/select2.js"></script>

这两个文件都位于内容占位符中。现在我想要，在页面加载和数据到达下拉列表之后，当用户单击下拉列表时，他/她应该能够搜索任何特定数据，然后选择该数据。简而言之，我想将搜索功能添加到下拉列表中。到目前为止，我做了什么，它没有用。它加载数据，但不添加搜索功能。我不知道是什么问题。并且。如果将脚本和脚本文件添加到MasterPage中而不是在内容页面中，它将起作用吗？我正在使用BS4。请帮帮我。

Answer 1

尝试将DropDownList的ClientIDMode属性设置为静态。

Answer 2

您只需使用$（“＃<％= ddEmployeeName.ClientID％>”）。select2（{ 占位符：“选择一个选项”， allowClear：正确 }）;

如何使用Select2.js在asp.net中的下拉列表中添加搜索功能

2 个答案: