MYBLOG

近期需要实现这么一个效果，类似下来框选择，点击文本框显示品牌，点击品牌显示车系。今天在这里博主把代码放出来，效果图如下：

因为这种效果使用的地方很多，为了使用方便，博主将其封装成了.net的用户控件，具体实现代码如下：

1、前台html代码

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="BrandSel.ascx.cs" Inherits="IT小马.Control.brandsel3.BrandSel" %>
<link rel="stylesheet" href="/control/brandsel3/css/custom.css" />
<script src="/control/brandsel3/js/jquery.min.js"></script>

<div id="select_peek001" class="select_cool01">
    <div class="select_wrap" onclick="select_click()" style="border: none;">
        <input type="text" name="xxx" value="点击选择车系品牌" class="pg_select" readonly="readonly" id="select-val" />
    </div>
    <div class="sell-brand sell-hide" id="sell_brand" style="display: none;">
        <ul class="brand-ul">
            <asp:Literal ID="Lt_Letter" runat="server"></asp:Literal>
        </ul>
        <div class="brand-list">
            <asp:Literal ID="Lt_Brand" runat="server"></asp:Literal>
        </div>
    </div>
    <div class="sell-series" id="sell-series">
    </div>
</div>
<input id="cartypeid" type="hidden" />
<input id="carbrandid" type="hidden" />
<input id="carseriesid" type="hidden" />
<script src="/control/brandsel3/js/jquery.scroll2Top.min.js"></script>
<script src="/control/brandsel3/js/select.js"></script>
<script>
    window.RRC = {
        Q: [],
        addAsyncScript: function (url) {
            var ndScript = document.createElement('script');
            ndScript.type = 'text/javascript';
            ndScript.async = true;
            ndScript.src = url;
            var ndPlaceholder = document.getElementsByTagName('script')[0];
            ndPlaceholder.parentNode.insertBefore(ndScript, ndPlaceholder);
        }
    };
</script>
<script type="text/javascript">
    function GetSeries(BrandIds, BrandName) {
        $("#sell-series").show();
        $("#sell_brand").hide();//隐藏前层div
        var html = " <span id=\"series_back\" title=\"返回品牌\" onclick=\"select_neispan();\">&lt;" + BrandName + "</span>";
        $.post("/tool/ajaxtool.ashx", { "action": "getallseares", "brandids": BrandIds }, function (data) {
            var json = eval("(" + data + ")");
            var len = json.length;
            if (len > 0) {
                for (var i = 0; i < len; i++) {
                    html += "<p class=\"series-item\" onclick=\"SetValue('" + json[i].TYPEID + "','" + json[i].BRANDID + "','" + json[i].ID + "','" + BrandName + "','" + json[i].CLASSNAME + "');\">" + json[i].CLASSNAME + "</p>";
                }
                $("#sell-series").html(html);
                $("#sell-series").show();
            }
        }, "text");
    }
    function SetValue(typeid, brandid, seriesid, brandname, seriesname) {
        $("#cartypeid").val(typeid);
        $("#carbrandid").val(brandid);
        $("#carseriesid").val(seriesid);
        $("#sell-series").hide();
        $("#select-val").val(brandname + "/" + seriesname);
    }
</script>
<script type="text/javascript" language="javascript" src="/control/brandsel3/js/select.js"></script>

2、后台cs代码

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace IT小马.Control.brandsel3
{
    public partial class BrandSel : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindData();
            }
        }

        protected void BindData()
        {
            string SqlSelect = @"SELECT DISTINCT(BRANDNAME),LETTERNUM,( SELECT DISTINCT STUFF(
                              (SELECT ',' +CAST(U1.ID AS NVARCHAR(255)) FROM UCARBRAND  AS U1 WHERE U1.BRANDNAME=U2.BRANDNAME FOR XML PATH('')),1, 1, ''))AS ID
                             FROM UCARBRAND AS U2 ORDER BY LETTERNUM ASC";
            DataTable Dt_Brand = SQLServerHelper.ExecuteTable(SqlSelect);
            if (Dt_Brand != null && Dt_Brand.Rows.Count > 0)
            {
                string[] Lists = new string[] { "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z" };
                foreach (string i in Lists)
                {
                    DataRow[] DtInfor = Dt_Brand.Select(string.Format("LETTERNUM='{0}'", i));
                    if (DtInfor != null && DtInfor.Length > 0)
                    {
                      this.Lt_Letter.Text += string.Format(" <li><a>{0}</a></li>", i);
                        BindBrand(DtInfor, i);
                    }
                }
            }
        }
        protected void BindBrand(DataRow[] DtInfor, string Letter)
        {
            this.Lt_Brand.Text += string.Format("<span id=\"letter_{0}\" data-title=\"{0}\" class=\"title\">{0}</span>", Letter);
            foreach (DataRow row in DtInfor)
            {
                this.Lt_Brand.Text += string.Format("<p class=\"brand-item\" onclick=\"GetSeries('{0}','{1}');\" data-brand_name=\"{1}\">{1}</p>", row["ID"], row["BRANDNAME"]);
            }
        }

    }
}

3、源码下载