注册登录

JS+DIV模拟SELECT表单域

时间:2016-02-24 19:17 来源: 我爱IT技术网作者:佚名

欢迎您访问我爱IT技术网，今天小编为你分享的编程技术是：【JS+DIV模拟SELECT表单域】，下面是详细的分享！

JS+DIV模拟SELECT表单域

以下为引用的内容：
<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>

以上所分享的是关于JS+DIV模拟SELECT表单域，下面是编辑为你推荐的有价值的用户互动：

　　相关问题：js实现增加form表单中的输入域

　　答： function add(){ //取得表格 var table = document.getElementById("table1"); //取得行数; var num = table.rows.length; //增加一行 var newrow1 = table.insertRow(num-1); var cell1 = newrow1.insertCell(); var cell2 = newrow1.insertCe... >>详细

　　相关问题：是不是一定要有表单域,才能添加表单对象?

　　答：也不一定，不加表单域，结合js的话也能提交数据，只是有没有这个必要而已比如使用jquery的$.post()，即可无需表单而提交表单数据 >>详细

　　相关问题：某表单域值改变另一表单域值同时改变，怎么做？

　　答：去找二级联动代码按他的办法就可以二级联动代码比较多，你还是自己看下比较好其实现的主体思想是预先把所有分类信息都调出来放在js数组里面，在事件触发的时候直接用js添加select的option >>详细

评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）

JS+DIV模拟SELECT表单域

JS+DIV模拟SELECT表单域

以上所分享的是关于JS+DIV模拟SELECT表单域，下面是编辑为你推荐的有价值的用户互动：

最新教程

相关教程