請問這樣的一個控件怎么做?

Question

因DropDownList只能單選，而ListBox可以多選，但是用了它界面會變得太難看了。
見到網上有一控件例子：
當點擊一個DropDownList，DropDownList下面會彈出一個層，
層里面根據實際情況，產生任意個CheckBox,可以任選其中幾個，也可全選。
每勾選一個CheckBox，DropDownList里顯示勾選的CheckBox的Text，
如勾選多個的話，它們之間就用逗號分融開。
點擊頁面的其它地方，層便自動消失。

Answer 1

这个好做  跟 google suggest 的原理 差不多
如果你用异步获取 下面复选框的内容
就用 jquery 很好的能够解决

Answer 2

 谁有写好的代码 给小弟看看 [email protected] 不胜感激

Answer 3

我想
當點擊一個DropDownList，DropDownList下面會彈出一個層,但層被DropDownList的選項給遮住了，有什么好的方法不讓讓DropDownList的選項彈出來。

Answer 4

可以这样：
先放一个textbox，
下面用repeater控件，然后itemtemplate里面放一个checkbox。
下拉框的显示--js控制
如勾選多個的話，它們之間就用逗號分融開。----用js控制。
點擊頁面的其它地方，層便自動消失。 ----用js控制。

Answer 5

我沒有使用DropDownList，而是用一個TextBox1,和一個Label
Lable的內容是: 2009-01-01,2009-02-02,2009-03-03
當點擊TextBox1時，產生一個層，再根據Lable的內容。產生了三個checkbox和label(均為HTML的)
勾選某一個checkbox,將會累加相應的label的內容，之間用逗號分隔，最后作為TextBox1的內容。
下面是javascript代碼。<script language ='javascript' type='text/javascript'>
    function xOnFocus(obj)
    {
    var lab=document.getElementById('div_' + obj.id);
    if(!lab)
    {
    var xdiv=document.createElement('DIV');
    xdiv.id='div_' +obj.id;
    xdiv.noWrap=false;
    xdiv.style.position='absolute';
    xdiv.TipText='';
    xdiv.style.color='Black';
    xdiv.style.width='120px';
    xdiv.style.padding='1px';
    xdiv.style.display='inline';
    xdiv.style.backgroundColor='White';
    xdiv.style.borderColor='Black';
    xdiv.style.borderStyle='Solid';
    xdiv.style.borderWidth='1px';
    xdiv.style.zIndex='1000';
    xdiv.style.top=document.body.scrollTop + obj.getBoundingClientRect().bottom;
    xdiv.style.left=document.body.scrollLeft + obj.getBoundingClientRect().left;
            xdiv.style.height='10px';
    document.body.insertBefore(xdiv);            var arr =document.getElementById ('Label1').innerHTML.split(',')            for(var i=0 ; i< arr.length;i++)
            {
                var xcheck = document.createElement('INPUT');
                xcheck.setAttribute('type','checkbox');
                xcheck.setAttribute('id',obj.id+'checkbox'+i);
                xcheck.attachEvent('onclick',ff);
                xdiv.insertBefore(xcheck);
                var xlabel = document.createElement('LABEL');
                xlabel.setAttribute('id',obj.id+'label'+i);
                xlabel.setAttribute('innerText',arr[i]);
                xdiv.insertBefore(xlabel);
            }
    }
    else
    {
    lab.style.display='inline';
    }
    }    function ff(){
        var arr =document.getElementById ('Label1').innerHTML.split(',');
        var strChoose='';
        for(var i=0 ; i< arr.length;i++){
            if(document.getElementById('TextBox1checkbox'+i).checked==true){
                strChoose +=','+ document.getElementById('TextBox1label'+i).innerHTML;
            }
        }
        document.getElementById('TextBox1').value = strChoose.substr(1);
    }
</script>

Answer 6

但仍有問題如下，我不知道如何當焦點不在TextBox1,或者不在層上，或者不在層里面的checkbox或label上面，層就會自動消失。

Answer 7

//我已將它寫成控件，功能都已基本上達到了，只是比較粗糙一點。
using System;
using System.Collections.Generic;
using System.Text;
using System.ComponentModel;namespace IBEERP.IBEComponent.UtilityLibrary
{
    public class TextCheckList : System.Web.UI.WebControls.TextBox
    {
        public TextCheckList()
        { }        private string labeldata = "";        [Description("ContectLabel")]
        [Category("ContectLabel")]
        public string LabelData
        {
            get
            {
                return labeldata;
            }
            set
            {
                labeldata = value;
            }
        }        protected override void OnInit(EventArgs e)
        {
            string strScript = @"
                <script language ='javascript' type='text/javascript'>
                    function xOnFocus(obj)
                    {
                    var lab=document.getElementById('div_' + obj.id);
                    if(!lab)
                    {
                    var xdiv=document.createElement('DIV');
                    xdiv.id='div_' +obj.id;
                    xdiv.noWrap=false;
                    xdiv.style.position='absolute';
                    xdiv.TipText='';
                    xdiv.style.color='Black';
                    xdiv.style.width='120px';
                    xdiv.style.padding='1px';
                    xdiv.style.display='inline';
                    xdiv.style.backgroundColor='White';
                    xdiv.style.borderColor='Black';
                    xdiv.style.borderStyle='Solid';
                    xdiv.style.borderWidth='1px';
                    xdiv.style.zIndex='1000';
                    xdiv.style.top=document.body.scrollTop + obj.getBoundingClientRect().bottom;
                    xdiv.style.left=document.body.scrollLeft + obj.getBoundingClientRect().left;
                            xdiv.style.height='10px';
                            xdiv.attachEvent('onmouseleave',function(){kk(obj)});
                    document.body.insertBefore(xdiv);                            var arr =document.getElementById ('+LabelData+').innerHTML.split(',')                            for(var i=0 ; i< arr.length;i++)
                            {
                                var xcheck = document.createElement('INPUT');
                                xcheck.setAttribute('type','checkbox');
                                xcheck.setAttribute('id',obj.id+'checkbox'+i);
                                xcheck.attachEvent('onclick',function(){ff(obj)});
                                xdiv.insertBefore(xcheck);
                                var xlabel = document.createElement('LABEL');
                                xlabel.setAttribute('id',obj.id+'label'+i);
                                xlabel.setAttribute('innerText',arr[i]);
                                xdiv.insertBefore(xlabel);
                            }
                    }
                    else
                    {
                    lab.style.display='inline';
                    }
                    }                    function ff(obj){
                        var arr =document.getElementById ('+LabelData+').innerHTML.split(',');
                        var strChoose='';
                        for(var i=0 ; i< arr.length;i++){
                            if(document.getElementById(obj.id+'checkbox'+i).checked==true){
                                strChoose +=','+ document.getElementById(obj.id+'label'+i).innerHTML;
                            }
                        }
                        document.getElementById(obj.id).value = strChoose.substr(1);
                    }                    function kk(obj){
                        var lab=document.getElementById('div_'+obj.id);
    if (lab) lab.style.display='none';
                    }//                  function xOnBlur(obj)
//     {
//debugger;
//     if(obj.AutoPostBack=='true') 
//     {
//     obj.onchange();
//     }
//     var lab=document.getElementById('div_' + obj.id);
//     if (lab) lab.style.display='none';
//     }
                    function xOnMouseOver(obj)
                    {
                        if(obj.AutoPostBack !='true') 
    {
//                        obj.style.backgroundColor= '#aaf8bb';
                            obj.style.cursor='hand';
    }
                    }
                    </script>
                ";
            if (!Page.ClientScript.IsStartupScriptRegistered("yinstextchecklist"))
                Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "yinstextchecklist", strScript);            base.Attributes.Add("OnFocus", "javascript:xOnFocus(this);");
            base.Attributes.Add("OnMouseOver", "javascript:xOnMouseOver(this);");
            //this.TextBox1.Attributes.Add("readonly", "true");
            base.Attributes["readonly"] = "true";        }    }
}