js 下拉框效果

<script type="text/javascript"> 
window.onload = function ()
{
    var oSelect = document.getElementsByTagName("input")[4];
    var oSub = document.getElementsByTagName("ul")[4];
    var aLi = oSub.getElementsByTagName("li");
    var i = 0;
    
     var Select = document.getElementsByTagName("input")[3];
    var Sub = document.getElementsByTagName("ul")[3];
    var aLii = Sub.getElementsByTagName("li");
    var j = 0;
    
      oSelect.onclick = function (event)
    {
        var style = oSub.style;
        style.display = style.display == "block" ? "none" : "block";
        //阻止事件冒泡
        (event || window.event).cancelBubble = true
    };
    
      Select.onclick = function (event)
    {
        var style = Sub.style;
        style.display = style.display == "block" ? "none" : "block";
        //阻止事件冒泡
        (event || window.event).cancelBubble = true
    };
    
    for (i = 0; i < aLi.length; i++)
    {
        //鼠标划过
        aLi[i].onmouseover = function ()
        {
            this.className = "hover"
        };
        //鼠标离开
        aLi[i].onmouseout = function ()
        {
            this.className = "";
        };
        //鼠标点击
        aLi[i].onclick = function ()
        {
            //alert(this.innerHTML);
            //oSelect.innerHTML = this.innerHTML    
            oSelect.value = this.innerHTML;
            //alert(oSelect.value);
        }
    }
    
    for (j = 0; j < aLii.length; j++)
    {
        //鼠标划过
        aLii[j].onmouseover = function ()
        {
            this.className = "hover"
        };
        //鼠标离开
        aLii[j].onmouseout = function ()
        {
            this.className = "";
        };
        //鼠标点击
        aLii[j].onclick = function ()
        {
            Select.value = this.innerHTML;
            Sub.style.display = "none";    
            
        }
    }
    document.onclick = function ()
    {
        oSub.style.display = "none";    
        Sub.style.display = "none";    
    };
    
    
    
};
</script>

 性别下拉框的jquery

    //点击性别文本框,弹窗具体信息
    $(".info_select").click(function(){
        $("#select_sex").css("display" , ($("#select_sex").css("display")=='none' ? "block" : 'none'));
        (event || window.event).cancelBubble = true
    });
    $("#info_img_sex").click(function(){
        $("#select_sex").css("display" , ($("#select_sex").css("display")=='none' ? "block" : 'none'));
        (event || window.event).cancelBubble = true
    });
    $("#sex_boy").click(function(){
        $("#select_sex").css("display","none");
        $(".info_select").attr("value","男");
    });    
    $("#sex_girl").click(function(){
        $("#select_sex").css("display","none");
        $(".info_select").attr("value","女");
    });    
    $("#sex_sc").click(function(){
        $("#select_sex").css("display","none");
        $(".info_select").attr("value","保密");
    });    
    
    document.onclick = function ()
    {
        $("#select_sex").css("display","none");
    };