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

ASP
asp分页（自己整理的2个分页程序）
ASP常用的系统配置函数
雨哲防采集策略之列表篇
雨哲浅谈关于防采集而不影响收录内容篇
asp数据库连接函数
ajax XMLHTTP Post Form时的表单乱码综合解决
ASP注入详细命令40条
用ASP实现MSSQL用户密码破解
ASP创建对象的两种方法比较
ASP字符串转换为整形、双精度型、布尔
ASP计算str2在str1中出现的次数
asp采集抓取网上房产信息的代码
ASP注册登陆实例代码
ASP中使用FileSystemObject时提高性能的方法
分享一个好东东,动态Include文件 (Dynamic File Includes)
解决 JScript 中使用日期类型数据时出现类型错误的问题
在ASP里面创建GUID
在JScript中使用缓存技术的实际代码
ASP javascript Application对象的Contents和StaticObjects做Cache的一些经验
海阳2006+功能中的潜水王

No. « 74 75 76 77 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-08-14   浏览: 212 ::
收藏到网摘: 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>