checkboxlist 下拉框多选功能

点击文本框,弹出一个下拉框,实现多选功能。

先看下效果图:

checkboxlist 下拉框多选功能_第1张图片

HTML页:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>下拉框实现多选</title>
    <script src="Jquery-1.8.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        /*
            说明:由于CheckBoxList 值是在后台绑定的,前台没有设置value,所有当用js取checkbox的value值时,默认都为on。
            在后台可以正常访问,解决方案:暂无。
        */
       $(function() {
           $("#txtList").mouseenter(function() {
               $("#divChkList").slideDown("fast");
           });
           $("#divMulti").mouseleave(function() {
               $("#divChkList").slideUp("fast");
           });
           $("#divChkList :checkbox").each(function() {
               $(this).click(function() {
                   var $txtList = $("#txtList");
                   if (this.checked) {
                       $txtList.val($txtList.val() + $(this).next().text()+",");
                   }
                   else {
                       $txtList.val($txtList[0].value.replace($(this).next().text()+',',''));
                   }
               });
           });
       });
    </script>
    
</head>
<body>
    <form id="form1" runat="server">
    <input type="checkbox" id="test" value="1" title="d" />
    <div style="width:400px;height:300px;margin:0 auto;">
        <div id="divMulti">
            <asp:TextBox ID="txtList" runat="server" Width="100px"></asp:TextBox>
            <div id="divChkList" style="display: none; border: solid 1px #CCCCCC; position: fixed;
                z-index: 100; height: 160px; width: 100px; overflow-y: scroll; background-color: White">
                <asp:CheckBoxList ID="chkList" runat="server" RepeatLayout="Table" RepeatDirection="Vertical">
                </asp:CheckBoxList>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

cs 代码:

    public partial class multiSelect : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DataTable dt = new DataTable();
                dt.Columns.Add("Name", typeof(string));
                dt.Columns.Add("Age", typeof(string));
                for (int i = 0; i < 4; i++)
                {
                    DataRow row = dt.NewRow();
                    row[0] = "N" + i;
                    row[1] = "V" + i;
                    dt.Rows.Add(row);
                }
                this.chkList.DataSource = dt;
                this.chkList.DataTextField = "name";
                this.chkList.DataValueField = "age";
                this.chkList.DataBind();

            }
        }
    }

源码下载地址:

点击打开链接

你可能感兴趣的:(下拉框,checkboxlist,多选)