当前位置: 首页 > 图文教程 > 网络编程 > ASP > JS+DIV模拟SELECT表单域

ASP
一个ASP版的图片浏览管理器
无组件上传图片至SQLSERVER数据库
利用Jmail.Message发送邮件
用Web页面执行客户端程序
多图片上传到指定的目录并存到数据库
dreamweaverMX通用分页代码研究
下拉菜单输入,根据输入内容自动定位
中文的无组件文件上传ASP函数
一个利用adsi得到局域网信息的asp文件
根据需要动态include不同的文件
让自定义文件下载支持断点续传
用数组实现数据记录的批量录入方法
上传的进度条 实时反映上传情况
用ASP动态生成javascript的表单验证代码
ASP 编程中20个非常有用的例子
ASP生成Word文档的又一方法
用asp解析图片地址，并将其保存。
利用ASP的文件操作实现用户管理
创建 Visual Basic COM 组件在 ASP 中使用
调试 ASP 中使用的 Visual Basic COM 组件

No. « 195 196 197 198 »

技术文章搜索

关键字

ASP 中的 JS+DIV模拟SELECT表单域

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-08-14   浏览: 125 ::
收藏到网摘: n/a

最近在做一个AJAX项目，其中用到很多满屏层的模拟屏幕锁定，但有个很头痛的东西，就是下拉列表框始终会显示在层的上面，为了解决这个问题才写了这个JS类，个人感觉还好用，在这和大家分享下，有好的意见也请提出！

效果预览：

程序代码：

以下为引用的内容：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS+DIV模拟SELECT表单元素</title>
<script language="Javascript">
selOptions = {
    name : "selOptions",//此处为数组的名称
    data : new Array()
}
selOptions.data[0] = new Array("0","option0")
selOptions.data[1] = new Array("1","option1")
selOptions.data[2] = new Array("2","option2")
selOptions.data[3] = new Array("3","option3")
selOptions.data[4] = new Array("4","option4")
selOptions.data[5] = new Array("5","option5")
selOptions.data[6] = new Array("6","option6")
selOptions.data[7] = new Array("7","option7")
selOptions.data[8] = new Array("8","option8")
selOptions.data[9] = new Array("9","option9")
selOptions.data[10] = new Array("10","option10")
selOptions.data[11] = new Array("11","option11")
selOptions.data[12] = new Array("12","option12")
selOptions.data[13] = new Array("13","option13")
selOptions.data[14] = new Array("14","option14")
selOptions.data[15] = new Array("15","option15")
tmhSelect = {
    //主调函数
    //参数含义：容器，名称，数据[数组]，默认项，宽度，动作(目标函数不能带参)
    show : function(obj,selectName,dataObj,selOption,width,action){
        var data = dataObj.data;
        var _Obj = document.getElementById(obj);
        if(!_Obj || typeof(_Obj) == "undefined"){return false;}
        var s1 = document.createElement("div");
        if(isNaN(width) || width==""){width=150;}else if(width<26){width=26;}
        s1.style.width = width;
        s1.onmouseleave = function(){tmhSelect.hidden(selectName)};
        var str = "";
        //判断是否有数据
        if(data.length > 0){
            //有数据时显示数据选项列表
            str += "<input type=’hidden’ name=’"+ selectName +"’ id=’"+ selectName +"’ value=’"+ tmhSelect.relv(selOption,data) +"’>";
            str += "<div id=’_a_"+ selectName +"’ style=’width:"+ width +"px;height:18px; border:1px #666666 solid;’>";
            str += "<div id=’_v_"+ selectName +"’ style=’position:relative;float:left;left:2px;width:"+ (width-22) +"px;height:18px;font-size:12px;overflow:hidden;line-height:18px;’ onclick=\"tmhSelect.showOptions(’"+ selectName +"’);\">"+ tmhSelect.reStr(data,selOption) +"</div>";
            str += "<div style=’position:relative;float:right;right:0px;width:18px;height:18px;text-align:center;font-family:Webdings;font-size:16px;overflow:hidden;background-color:#CCCCCC;cursor:pointer!important;cursor:hand;’ onclick=\"tmhSelect.showOptions(’"+ selectName +"’);\">6</div>";
            str += "</div>";
            str += "<div id=’_b_"+ selectName +"’ style=’position:absolute; background-color:#FFFFFF; width:"+ width +"px; height:"+ tmhSelect.height(data.length) +"px;border:1px #666666 solid;overflow-x:hidden;overflow-y:auto;display:none; z-index:99999;’>";
            for(i=0;i<data.length;i++){
                str += "<div id=’_s_"+ selectName +"’ style=’"+ tmhSelect.style(1,data[i][0],selOption) +"’ onmouseover=\"tmhSelect.css(2,this,’"+ data[i][0] +"’,’"+ selectName +"’)\" onmouseout=\"tmhSelect.css(1,this,’"+ data[i][0] +"’,’"+ selectName +"’)\" onclick=\"tmhSelect.selected(this,’"+ data[i][0] +"’,"+ dataObj.name +",’"+ action +"’)\">"+ data[i][1] +"</div>";
            }
            str += "</div>";
        }else{
            //没有数据时显示一个空窗体
            str += "<input type=’hidden’ name=’"+ selectName +"’ id=’"+ selectName +"’ value=’"+ selOption +"’>";
            str += "<div id=’_a_"+ selectName +"’ style=’width:"+ width +"px;height:18px; border:1px #666666 solid;’>";
            str += "<div id=’_v_"+ selectName +"’ style=’position:relative;float:left;left:2px;width:"+ (width-22) +"px;height:18px;font-size:12px;overflow:hidden;line-height:18px;’ onclick=\"tmhSelect.showOptions(’"+ selectName +"’);\"></div>";
            str += "<div style=’position:relative;float:right;right:0px;width:18px;height:18px;text-align:center;font-family:Webdings;font-size:16px;overflow:hidden;background-color:#CCCCCC;cursor:pointer!important;cursor:hand;’ onclick=\"tmhSelect.showOptions(’"+ selectName +"’);\">6</div>";
            str += "</div>";
            str += "<div id=’_b_"+ selectName +"’ style=’position:absolute; background-color:#FFFFFF; width:"+ width +"px; height:"+ tmhSelect.height(0) +"px;border:1px #666666 solid;overflow-x:hidden;overflow-y:auto;display:none; z-index:99999;’></div>";
        }
        s1.innerHTML = str;
        _Obj.appendChild(s1);
    },
    //返回选定项的值
    value : function(n){return document.getElementById(n).value;},
    //返回选定项的文本
    text : function(n){return document.getElementById("_v_"+ n).innerText;},
    selected : function(o,v,dn,action){
        var d = dn.data;
        var n = o.id.replace(/(_s_)/gi,"")
        document.getElementById(n).value = v;
        document.getElementById("_v_"+ n).innerHTML = tmhSelect.reStr(d,v);
        tmhSelect.showOptions(n)
        for(var i=0;i<document.getElementById("_b_"+ n).childNodes.length;i++){
            document.getElementById("_b_"+ n).childNodes[i].style.cssText = tmhSelect.style(1)
        }
        o.style.cssText = tmhSelect.style(2);
        if(action!="" && action != null){
            try{eval(action)}catch(e){}
        }
    },
    relv : function(v,d){
        for(i=0;i<d.length;i++){
            if(d[i][0] == v){
                return v;
            }
        }
        if(v == null || v == ""){
            return d[0][0];
        }
    },
    reStr : function(d,m){
        for(i=0;i<d.length;i++){
            if(d[i][0] == m){
                return d[i][1];
            }
        }
        if(m == null || m == ""){
            return d[0][1];
        }
    },
    height : function(l){var h;if(l>10 || l<1)h = 10 * 15; else h = l * 15; h += 2;return h;},
    showOptions : function(n){
        var o = document.getElementById("_b_"+ n)
        if(o.style.display == "none")
            o.style.display ="";
        else
            o.style.display ="none";
        _selectOptionsElm = o;
    },
    hidden : function(n){
        document.getElementById("_b_"+ n).style.display ="none";
    },
    style : function(m,v1,v2){
        var cs = "";
        if(v1 == v2 && v1!="" && v1!=null){m=2;}
        switch(m){
            case 1:
                cs = "height:15px; font-size:12px; line-height:15px; overflow:hidden; background-color:#FFFFFF; color:#000000; font-weight:normal;";
                break;
            case 2:
                cs = "height:15px; font-size:12px; line-height:15px; overflow:hidden; background-color:#315DAD; color:#FFFFFF; font-weight:bold;";
                break;
        }
        return cs;
    },
    css : function(s,obj,v,n){
        var v1 = document.getElementById(n).value;
        if(v == v1){
            obj.style.cssText = tmhSelect.style(2);
            return;
        }else{
            obj.style.cssText = tmhSelect.style(s)
        }
    }
}
function test(){
    alert(tmhSelect.value(’test’));
}
</script>
</head>
<body>
<div id="testdiv"></div><BR />
<input type="button" name="button" value="查看文本" onclick="alert(tmhSelect.text(’test’))" />
<input type="button" name="button" value="查看选项值" onclick="alert(tmhSelect.value(’test’))" />
<script language="Javascript">
tmhSelect.show("testdiv","test",selOptions,"",160,"test()");
</script>
</body>
</html>