Question

vertical tab

Answer 1

您可以使用Select2 The jQuery replacement for select boxes。首先包含这些文件，您可以从Here

下载它们

<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="js/select2.js"></script>
<link href="css/select2.css" rel="stylesheet" />

ASP

<asp:DropDownList ID="DropDownList1" runat="server" CssClass="custom" AutoPostBack="true">   
</asp:DropDownList>

Java脚本

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

自定义 CSS ，用于增加DropDownList

的宽度

<style type="text/css">
   .custom 
   {
       width: 50%;
   }
</style>

您的逻辑代码保持不变。我测试了它并且工作正常。

代码背后

SqlConnection myDBCon = new SqlConnection(sc); 
SqlCommand command = new SqlCommand("select  Caption_name from Commercial_caption", myDBCon);
myDBCon.Open();
SqlDataAdapter mySqlAdapter = new SqlDataAdapter();
mySqlAdapter.SelectCommand = command;
DataSet ds = new DataSet();
mySqlAdapter.Fill(ds);
DropDownList1.DataSource = command.ExecuteReader();
DropDownList1.DataTextField = "Caption_name";
DropDownList1.DataBind();
DropDownList1.Items.Insert(0, new ListItem("",""));
myDBCon.Close();

注意：您需要在第0个索引处添加空项目，select2可以选择占位符。

Asp.net中的可搜索下拉列表

1 个答案: