div下拉框(待改善)

不说话,直接上代码,其中函数dealchose()没有实现,各位就不必纠结了

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP ‘div下拉.jsp‘ starting page</title>

    <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">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script>

    function dealClick(){
    var reasonStr = document.getElementById("zsyy");   //需要弹出下拉列表的文本框
    var repairList = document.getElementById("reasons"); //要弹出的下拉列表
    var divClose = document.getElementById("tdClose");
    var reasonOptions = document.getElementsByName("zsyys"); //所有列表元素
    var zsyystr=new Array();//输入框填写的注塑原因
    zsyystr=reasonStr.value.split(";");
    var bNoAdjusted = true;

    for(var i=0;i<reasonOptions.length;i++){
        for(var j=0;j<zsyystr.length;j++){
            if(reasonOptions[i].value==zsyystr[j]){
                reasonOptions[i].checked=true;
            }
        }
    }
    divClose.onclick = function()
    {
        repairList.style.display = "none";
        if(reasonStr.value==‘‘){
            reasonStr.value="单击文本框选择修模原因";
            reasonStr.style.color=‘#999999‘;
        }
    };
    //文本获得焦点时的事件
    reasonStr.onfocus = function()
    {    

        repairList.style.display = "block";
        if(reasonStr.value=="单击文本框选择修模原因"){
            reasonStr.value=‘‘;
            reasonStr.style.color=‘#000000‘;
        }else{
            reasonStr.style.color=‘#000000‘;
        }
        //reasonStr.style.color=‘#000‘;
        if (bNoAdjusted)
        {

            bNoAdjusted = false;
            //设置下拉列表的宽度和位置
            repairList.style.width =166;
            repairList.style.posTop = 40;
            repairList.style.posLeft = 118;

        }
    }
}

    </script>

  </head>

  <body>

   <table>
   <tr>
                <td width="100" height="25" class="tableshortleftbg">注塑修模原因</td>
                <td >
                <input type="text" onMouseDown="dealClick()" id="zsyy" name="zsyy" size="22" value="单击文本框选择修模原因" style="color: #999999" readonly="readonly" /> <font color="red">*</font>
                    <div id="reasons" style="display: none; border: 1px solid #000000; overflow: hidden; height: 150px; width: 50px; position: absolute; ">
                        <table width="100%" border="0" cellpadding="0" cellspacing="0">
                            <tr>
                                <td colspan="1" align="left" width="100px" style=" overflow: auto; height: 30px; background-color: #FFFFFF;">
                                    <input name="zsyys" type="checkbox" value="毛刺" onClick="dealChosen()">毛刺
                                </td>
                                <td colspan="1" align="left" width="100px" style=" overflow: auto; height: 30px; background-color: #FFFFFF;">
                                    <input name="zsyys" type="checkbox" value="脱模剂" onClick="dealChosen()">脱模剂
                                </td>
                                </tr>
                                <tr>
                                <td colspan="1" align="left" width="95px" style=" overflow: auto; height: 30px; background-color: #FFFFFF;">
                                    <input name="zsyys" type="checkbox" value="油污" onClick="dealChosen()">油污
                                </td>

                                <td align="left" style=" overflow: auto; height: 35px; background-color: #FFFFFF;">
                                    <input name="zsyys" type="checkbox" value="浇口"  onClick="dealChosen()">浇口
                                </td>
                                </tr>
                                <tr>
                                <td align="left" style=" overflow: auto; height: 30px; background-color: #FFFFFF;" >
                                    <input name="zsyys" type="checkbox" value="机械手" onClick="dealChosen()">机械手
                                </td>
                                <td align="left" style=" overflow: auto; height: 30px; background-color: #FFFFFF;">
                                    <input name="zsyys"  type="checkbox" value="变形" onClick="dealChosen()">变形
                                </td>

                            </tr>

                            <tr>
                                <td colspan="3" align="left"  style=" overflow: auto; height: 30px; background-color: #FFFFFF;">
                                    <input name="zsyys" type="checkbox" value="修模不合格"  onClick="dealChosen()">修模不合格
                                </td>
                                </tr>

                            <tr>
                                <td colspan="3"  height="30px" align="center" id="tdClose" style="cursor: hand; background-color:#CCCCCC;" ><b>关闭</b></td>
                            </tr>
                        </table>
                    </div>
                </td>                

                <td class="tableshortleftbg">&nbsp;</td>
                <td width="100" class="tableshortleftbg">修模原因备注</td>
                <td><input type="text" name="yyrm" size=22 maxlength=50  ></td>
                <td class="tableshortleftbg">&nbsp;</td>
                <td width="100" class="tableshortleftbg">紧急程度</td>
                <td>
                    <input type="radio" name="jjcd" id="jj" size=22 maxlength=20 readonly="readonly " value="紧急"><span><b><font color="red">紧急</font></b></span>
                    <input type="radio" name="jjcd" id="fj" size=22 maxlength=20 readonly=" readonly" value="非紧急"><span><b><font color="red">非紧急</font></b></span>
                </td>
                <td class="tableshortleftbg">&nbsp;</td>
            </tr>
            </table>

  </body>
</html>
时间: 2024-10-03 13:44:18

div下拉框(待改善)的相关文章

下拉框与文本框重叠,即可以录入又可以选择的效果。

<div style="position:relative;"> <span style="margin-left: 100px; width: 18px; overflow: hidden;"> <select id="brand" name="brandId" style="width:150px; margin-left:-100px;height:21px;">

vue获取下拉框值

vue获取下拉框的值,用vue-modle,只有点击下拉框的值才会赋值到下拉框中,初始时下拉框没有数据,而改用$event就不会出现这样的问题,下面看代码以及图解: v-model解决方式: <!-- 下拉框 --> <div v-show="moreStore" class="select"> <select class="choice" v-on:change="indexSelect" v-

jQuery切换下拉框里面对应的div

<!DOCTYPE html><html>      <head>            <meta charset="UTF-8">            <title>jquery实现下拉框选中对应的div</title>            <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script

DIV模拟的下拉框特效

CSS: <style type="text/css"> body, ul, li { margin: 0; padding: 0; font-size: 13px; } ul, li { list-style: none; } #divselect { width: 186px; margin: 80px auto; position: relative; z-index: 10000; } #divselect cite { width: 150px; height:

代教材之(用DIV+CSS定义漂亮下拉框select)

1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>代教材之

js实现点击下拉框选中对应的div

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js实现点击下拉框选中对应的div</title> <style type="text/css"> div{display:none;} </style> </head> <body> <select name="

用div,ul,input模拟select下拉框

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>案例测试</title> 6 <link rel="stylesheet" href="css/all.css" /> 7 <script type="text/javascript" src=&

IE6浏览器下div无法遮盖select下拉框解决方法

IE6浏览器下div无法遮盖select下拉框解决方法:在IE6浏览器下,select下拉框无法被div遮盖,其他的主流浏览器都是正常的.这里简单介绍一下如何解决此问题.默认状态下IE6的表现: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51texiao.cn

浮动子div撑开父div的几种方法、给select赋值、zoom样式的含义、实现select下拉框readonly

1.浮动子div撑开父div的几种方法: (1)在父div中在添加一个清除浮动的子div<div style=" clear:both;"></div>,该div不设置任何样式,只用来清除浮动 (2)在父div的css样式中设置overflow:hidden;zoom:1; (3)设置父div也为浮动元素float:left:,这样设置的坏处是不能用margin:auto:实现居中 (4)设置父元素display:inline-block;,这样设置的坏处是不能