Drop Down List with CheckBoxList

Common requirement in Search functionality

   In my application I stuck with one requirement where I have to display drop down list with Check Box List. After searching on net I finally implement this functionality with the help javascript.

   First I take Input Text Control and Image to give look as DropDownList. Then I have added one div which contain CheckBoxList.

   I write few javascript functions to achieve functionality. Following is Html Code:
  <form>
  <div onclick="Toggle();">
        <input id="Text1" type="text" onclick="ToogleDiv('divTest')" /><img src="" onclick="ToogleDiv('divTest')" alt=""/>
        <div id="divTest"  style="display:none; width:100px; height:100px; overflow:scroll; border-color:Black; background-color:Aqua; border-style:solid;" onmousemove="SetFlag();" onmouseout="SetFlagFalse();" onclick="ShowDiv();">
            <table>
                <tr>
                    <td>
                        <asp:CheckBoxList ID="CheckBoxList1" runat="server">
                            <asp:ListItem Text="a" Value="1"></asp:ListItem>
                            <asp:ListItem Text="b" Value="1"></asp:ListItem>
                            <asp:ListItem Text="c" Value="1"></asp:ListItem>
                            <asp:ListItem Text="d"  Value="1"></asp:ListItem>
                            <asp:ListItem Text="e" Value="1"></asp:ListItem>
                            <asp:ListItem Text="f" Value="1"></asp:ListItem>
                            <asp:ListItem Text="g" Value="1"></asp:ListItem>
                            <asp:ListItem Text="h" Value="1"></asp:ListItem>
                            <asp:ListItem Text="i" Value="1"></asp:ListItem>
                            <asp:ListItem Text="j" Value="1"></asp:ListItem>
                        </asp:CheckBoxList>
                    </td>
                </tr>               
            </table>
        </div>
    </div>
 </form>


Javascript Functions:

 <script type="text/javascript">
           
        var flag=true;
       
      
           
        function ToogleDiv(divID)
        {
           
            if (document.getElementById('divTest').style.display == "none")
            {
                document.getElementById('divTest').style.display = "block";
            }
            else
            {
                document.getElementById('divTest').style.display = "none";
            }               
        }
       
        function ShowDiv(divID)
        {           
            document.getElementById(divID).style.display = "block";           
        }
       
        function SetFlag()
        {
            flag = true;   
               
        }
       
        function SetFlagFalse()
        {
            flag = false;
          
        }
       
        function Toggle()
        {
            if (flag)
            {
                flag = false;
                document.getElementById('divTest').style.display = "block";
          
            }
            else
            {
                flag=true;
                document.getElementById('divTest').style.display = "none";           
            }
        }
       
    </script>