DIV层显示

最新推荐文章于 2021-04-15 12:28:32 发布

原创最新推荐文章于 2021-04-15 12:28:32 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #input #function #button #string #null

js 同时被 2 个专栏收录

19 篇文章

订阅专栏

css

5 篇文章

订阅专栏

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>

<html>
    <head>
        <title> 测试 </title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">

        <script type=text/javascript>
        var onecount;
        onecount=0;
        subcat = new Array();
    <%
        int count = 0;
        for(int i=0; i<10; i++) {

            String argid = "1"+i;
            String aname = "2"+i;
            String supid = i+"";
    %>
            subcat[<%=count %>] = new Array('<%=argid %>','<%=aname %>','<%=supid %>');
    <%
            count++;
        }
    %>

        onecount=<%=count %>;
        function changeSecond(locationid)
        {
            alert('kk');
            document.frm.DETAILED_TYPE.length = 0;
            var k;
            for (k=0;k < onecount; k++)
            {
                if (subcat[k][2] == locationid)
                {
                    alert('kd');
                    document.frm.DETAILED_TYPE.options[document.frm.DETAILED_TYPE.length] = new
        Option(subcat[k][1], subcat[k][0]);

                }
            }
        }
    </script>
    </head>

    <body class="Sfont">
        <center><br>
        <form action="AddPage.jsp" name="frm" onsubmit="return check();">
<table width="600" cellspacing="0" cellpadding="0" border="0" class="uniformstyle" id="myform">
<tr height="19" >
<td height="19" class="tdBgColor">类型<select style="width:110" name="CAR_TYPE" onchange="changeSecond(this.value)">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
        </select>
</td>
</tr>
<tr>
    <td>
        <select name="DETAILED_TYPE" style="width:80">
        </select>
        <input name="cityName" type="text" value="" style="width:130" />
        <button onclick="showDiv();">点击选择镇区</button>
    </td>
</tr>
</table>
</form>

        </center>
    </body>
    <div id="cityList" style="display:none;">
    <table style="width:100%; font-size:12px;">
    <tr>
    <td align="center">
        <button onclick="getValue()">确定</button>
        <button onclick="hiddenDiv()">关闭</button>
    </td>
    </tr>
    <tr>
    <td>
        <input type="checkbox" value="东城"/>东城
        <input type="checkbox" value="南城"/>南城
        <input type="checkbox" value="万江"/>万江
        <input type="checkbox" value="莞城"/>莞城
        <input type="checkbox" value="麻涌"/>麻涌
    </td>
    </tr>
    <tr>
    <td>
        <input type="checkbox" value="石龙"/>石龙
        <input type="checkbox" value="虎门"/>虎门
        <input type="checkbox" value="寮步"/>寮步
        <input type="checkbox" value="塘厦"/>塘厦
        <input type="checkbox" value="大朗"/>大朗

    </td>
    </tr>
    <tr>
    <td>
        <input type="checkbox" value="凤岗"/>凤岗
        <input type="checkbox" value="黄江"/>黄江
        <input type="checkbox" value="洪梅"/>洪梅
        <input type="checkbox" value="石碣"/>石碣
        <input type="checkbox" value="道滘"/>道滘
    </td>
    </tr>
    <tr>
    <td>
        <input type="checkbox" value="茶山"/>茶山
        <input type="checkbox" value="长安"/>长安
        <input type="checkbox" value="厚街"/>厚街
        <input type="checkbox" value="常平"/>常平
        <input type="checkbox" value="石排"/>石排
    </td>
    </tr>
    <tr>
    <td>
        <input type="checkbox" value="清溪"/>清溪
        <input type="checkbox" value="桥头"/>桥头
        <input type="checkbox" value="横沥"/>横沥
        <input type="checkbox" value="东坑"/>东坑
        <input type="checkbox" value="企石"/>企石
     </td>
    </tr>
    <tr>
    <td>
        <input type="checkbox" value="高埗"/>高埗
        <input type="checkbox" value="沙田"/>沙田
        <input type="checkbox" value="中堂"/>中堂
        <input type="checkbox" value="谢岗"/>谢岗
        <input type="checkbox" value="大岭山"/>大岭山
    </td>
    </tr>
    <tr>
    <td>
        <input type="checkbox" value="望牛墩"/>望牛墩
        <input type="checkbox" value="樟木头"/>樟木头
    </td>
    </tr>
    </table>

</div>
</html>

<script>
    var docu;
    function DivWindow(messageDiv){
        this.messageDIV=messageDiv;

        this.backgroundDIV = document.createElement("div");

        var e=window.event;
        var obj=e.srcElement;

        var t=obj.offsetTop;
        var l=obj.offsetLeft;
        while(obj=obj.offsetParent){
             t+=obj.offsetTop;
             l+=obj.offsetLeft;
        }

        var x=l-10,y=t+20;

        this.backgroundDIV.style.opacity="0.50";
        this.backgroundDIV.style.filter="Alpha(opacity=50);";
        this.backgroundDIV.style.backgroundColor="#E3E9EF";
        this.backgroundDIV.style.height="100%";
        this.backgroundDIV.style.width="100%";
        this.backgroundDIV.style.marginTop="0px";
        this.backgroundDIV.style.marginLeft="0px";
        this.backgroundDIV.style.position="absolute";
        this.backgroundDIV.style.top="0px";
        this.backgroundDIV.style.left="0px";
        this.backgroundDIV.style.zIndex=10;

        this.show = function(){
              document.body.appendChild(this.backgroundDIV);
              document.body.appendChild(this.messageDIV);
              this.messageDIV.style.position="absolute";
              this.messageDIV.style.top=y+"px";
              this.messageDIV.style.left=x+"px";
              this.messageDIV.style.zIndex=11;
        }

       this.remove = function(){
            document.body.removeChild(this.backgroundDIV);
            //document.body.removeChild(this.messageDIV);
            this.messageDIV.style.display="none";
        }
    }


    function showDiv(){

        var d = document.getElementById("cityList");
        d.style.width="282px";
        d.style.height="150px";
        d.style.opacity="0.50";
        d.style.filter="Alpha(opacity=90);";
        d.style.backgroundColor="#CCCCFF";
        d.style.padding="10px";
        d.style.display="";

        docu = new DivWindow(d);
        docu.show();

        setChecked();
    }

    function hiddenDiv(){
        if(docu != null) {
            setChecked();
            docu.remove();
            docu = null;
        }
    }

    function getValue(){
        var checkboxlist=cityList.getElementsByTagName("input");

        var str="";
        for(var i=0;i<checkboxlist.length;i++)
        {
            if(checkboxlist[i].type=="checkbox"&&checkboxlist[i].checked==true)
                str+=checkboxlist[i].value+",";
        }
        document.frm.cityName.value=str.substring(0,str.lastIndexOf(","));
        if(docu != null) {
            docu.remove();
            docu = null;
        }
    }


    function setChecked(){
        if(document.frm.cityName.value!="")
        {
            var citys=document.frm.cityName.value.split(",");
            var checkboxlist=cityList.getElementsByTagName("input");

            for(var box in checkboxlist)
                checkboxlist[box].checked=false;

            for(var k=0;k<citys.length;k++){
                //alert(citys[k]);
                for(var i=0;i<checkboxlist.length;i++)
                {
                    if(checkboxlist[i].type=="checkbox"&&checkboxlist[i].value==citys[k])
                       checkboxlist[i].checked=true;
                }
            }
        }
    }

</script>