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

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6.  
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  8. <html>
  9.   <head>
  10.     <base href="<%=basePath%>">
  11.  
  12.     <title>My JSP 'div下拉.jsp' starting page</title>
  13.  
  14.     <meta http-equiv="pragma" content="no-cache">
  15.     <meta http-equiv="cache-control" content="no-cache">
  16.     <meta http-equiv="expires" content="0">
  17.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  18.     <meta http-equiv="description" content="This is my page">
  19.     <!--
  20.     <link rel="stylesheet" type="text/css" href="styles.css">
  21.     -->
  22.     <script>
  23.  
  24.     function dealClick(){
  25.     var reasonStr = document.getElementById("zsyy");   //需要弹出下拉列表的文本框
  26.     var repairList = document.getElementById("reasons"); //要弹出的下拉列表
  27.     var divClose = document.getElementById("tdClose");
  28.     var reasonOptions = document.getElementsByName("zsyys"); //所有列表元素
  29.     var zsyystr=new Array();//输入框填写的注塑原因
  30.     zsyystr=reasonStr.value.split("；");
  31.     var bNoAdjusted = true;
  32.  
  33.     for(var i=0;i<reasonOptions.length;i++){
  34.         for(var j=0;j<zsyystr.length;j++){
  35.             if(reasonOptions[i].value==zsyystr[j]){
  36.                 reasonOptions[i].checked=true;
  37.             }
  38.         }
  39.     }
  40.     divClose.onclick = function()
  41.     {
  42.         repairList.style.display = "none";
  43.         if(reasonStr.value==''){
  44.             reasonStr.value="单击文本框选择修模原因";
  45.             reasonStr.style.color='#999999';
  46.         }
  47.     };
  48.     //文本获得焦点时的事件
  49.     reasonStr.onfocus = function()
  50.     {    
  51.  
  52.         repairList.style.display = "block";
  53.         if(reasonStr.value=="单击文本框选择修模原因"){
  54.             reasonStr.value='';
  55.             reasonStr.style.color='#000000';
  56.         }else{
  57.             reasonStr.style.color='#000000';
  58.         }
  59.         //reasonStr.style.color='#000';
  60.         if (bNoAdjusted)
  61.         {
  62.  
  63.             bNoAdjusted = false;
  64.             //设置下拉列表的宽度和位置
  65.             repairList.style.width =166;
  66.             repairList.style.posTop = 40;
  67.             repairList.style.posLeft = 118;
  68.  
  69.         }
  70.     }
  71. }
  72.  
  73.     </script>
  74.  
  75.   </head>
  76.  
  77.   <body>
  78.  
  79.    <table>
  80.    <tr>
  81.                 <td width="100" height="25" class="tableshortleftbg">注塑修模原因</td>
  82.                 <td >
  83.                 <input type="text" onMouseDown="dealClick()" id="zsyy" name="zsyy" size="22" value="单击文本框选择修模原因" style="color: #999999" readonly="readonly" /> <font color="red">*</font>
  84.                     <div id="reasons" style="display: none; border: 1px solid #000000; overflow: hidden; height: 150px; width: 50px; position: absolute; ">
  85.                         <table width="100%" border="0" cellpadding="0" cellspacing="0">
  86.                             <tr>
  87.                                 <td colspan="1" align="left" width="100px" style=" overflow: auto; height: 30px; background-color: #FFFFFF;">
  88.                                     <input name="zsyys" type="checkbox" value="毛刺" onClick="dealChosen()">毛刺
  89.                                 </td>
  90.                                 <td colspan="1" align="left" width="100px" style=" overflow: auto; height: 30px; background-color: #FFFFFF;">
  91.                                     <input name="zsyys" type="checkbox" value="脱模剂" onClick="dealChosen()">脱模剂
  92.                                 </td>
  93.                                 </tr>
  94.                                 <tr>
  95.                                 <td colspan="1" align="left" width="95px" style=" overflow: auto; height: 30px; background-color: #FFFFFF;">
  96.                                     <input name="zsyys" type="checkbox" value="油污" onClick="dealChosen()">油污
  97.                                 </td>
  98.  
  99.                                 <td align="left" style=" overflow: auto; height: 35px; background-color: #FFFFFF;">
  100.                                     <input name="zsyys" type="checkbox" value="浇口"  onClick="dealChosen()">浇口
  101.                                 </td>
  102.                                 </tr>
  103.                                 <tr>
  104.                                 <td align="left" style=" overflow: auto; height: 30px; background-color: #FFFFFF;" >
  105.                                     <input name="zsyys" type="checkbox" value="机械手" onClick="dealChosen()">机械手
  106.                                 </td>
  107.                                 <td align="left" style=" overflow: auto; height: 30px; background-color: #FFFFFF;">
  108.                                     <input name="zsyys"  type="checkbox" value="变形" onClick="dealChosen()">变形
  109.                                 </td>
  110.  
  111.                             </tr>
  112.  
  113.                             <tr>
  114.                                 <td colspan="3" align="left"  style=" overflow: auto; height: 30px; background-color: #FFFFFF;">
  115.                                     <input name="zsyys" type="checkbox" value="修模不合格"  onClick="dealChosen()">修模不合格
  116.                                 </td>
  117.                                 </tr>
  118.  
  119.                             <tr>
  120.                                 <td colspan="3"  height="30px" align="center" id="tdClose" style="cursor: hand; background-color:#CCCCCC;" ><b>关闭</b></td>
  121.                             </tr>
  122.                         </table>
  123.                     </div>
  124.                 </td>                
  125.  
  126.                 <td class="tableshortleftbg">&nbsp;</td>
  127.                 <td width="100" class="tableshortleftbg">修模原因备注</td>
  128.                 <td><input type="text" name="yyrm" size=22 maxlength=50  ></td>
  129.                 <td class="tableshortleftbg">&nbsp;</td>
  130.                 <td width="100" class="tableshortleftbg">紧急程度</td>
  131.                 <td>
  132.                     <input type="radio" name="jjcd" id="jj" size=22 maxlength=20 readonly="readonly " value="紧急"><span><b><font color="red">紧急</font></b></span>
  133.                     <input type="radio" name="jjcd" id="fj" size=22 maxlength=20 readonly=" readonly" value="非紧急"><span><b><font color="red">非紧急</font></b></span>
  134.                 </td>
  135.                 <td class="tableshortleftbg">&nbsp;</td>
  136.             </tr>
  137.             </table>
  138.  
  139.   </body>
  140. </html>

div下拉框（待改善）的更多相关文章

  1. jquery div 下拉框焦点事件

    这章与上一张<jquery input 下拉框(模拟select控件)焦点事件>类似 这章讲述div的焦点事件如何使用 div的焦点事件与input的焦点事件区别在于 需要多添加一个属性: ...

  2. jquery学习笔记：获取下拉框的值和下拉框的txt

    <div class="form-group"> <select class="form-control" id="iv_level ...

  3. vue获取下拉框值

    vue获取下拉框的值,用vue-modle,只有点击下拉框的值才会赋值到下拉框中,初始时下拉框没有数据,而改用$event就不会出现这样的问题,下面看代码以及图解: v-model解决方式: < ...

  4. 前端 HTML form表单标签 select标签 option 下拉框

    <select></select> select里面通常跟option配合使用 <!DOCTYPE html> <html lang="en&quo ...

  5. JS Div滚动，下拉框添加属性，年月日下拉条

    创建某一下拉菜单的项: str = str+"<option value='"+i+"'>"+i+"</option>&quo ...

  6. div自定义下拉框

    因为原生的下拉框不能修改其属性,很难美化下拉框. 所以自己用div简单自定义了一下下拉框,想美化直接修改css即可 <!DOCTYPE html> <html lang=" ...

  7. 用div，ul，input模拟select下拉框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. div模拟的下拉框特效

    随笔- 4 文章- 0 评论- 0 ? <style type="text/css"> body, ul, li { margin: 0; padding: 0; fo ...

  9. div模拟的下拉框特效jquery

    从网上找来的,感觉不错就拿来分享下 <style type="text/css"> body, ul, li { margin: 0; padding: 0; font ...

随机推荐

  1. 编译php 转

    LAOGAO added 20140907: configure: error: mcrypt.h not found. Please reinstall libmcrypt.复制代码 代码如下:wg ...

  2. HTML5与HTML4的比较

    HHTML5封装一些标签和属性,方便了开发. <form> <p> <label>Username:<input name="search" ...

  3. [usaco jan 09] 安全路径 travel [最短路径树]

    题面: 传送门 思路: 既然最后一条边不能走,那么就一定是换了一条路,一条不经过这最后一条边的路 如果想要这条路最短,那么其在路上一定尽可能多地走了最短路径 因此,我们对这张图跑一遍从1开始的单源最短 ...

  4. shell if 条件语句实践

    对于if 语法 我们不过多做介绍,这里直接上实例,以开发rsync服务启动脚本为例,先对rsync做个简单介绍 [root@backup ~]# rpm -qa|grep rsync rsync--. ...

  5. callee返回正被执行的Function对象

    arguments.length是实参长度, arguments.callee.length是形参长度. function fn(a, b, c, d) { console.log(arguments ...

  6. Hyperledger Fabric 环境配置

    简单说一下 Hyperledger Fabric的配置 1.第一步,安装curl brew install curl 注:没有brew的自行百度(mac) 2. 安装Docker 下载并安装Docke ...

  7. codeforce div2 426 D. The Bakery

    D. The Bakery time limit per test 2.5 seconds memory limit per test 256 megabytes input standard inp ...

  8. 【Windows Message】MFC 通过F5,刷新桌面

    //通过F5,刷新桌面 HWND hWndProgram = ::FindWindow( _T("Progman"), NULL); HWND hWndDefView = ::Fi ...

  9. glRectf(-0.5f, -0.5f, 0.5f, 0.5f)

    http://bbs.csdn.net/topics/370049656 x向右,y向上时OPENGL坐标系,z向屏幕外表示正方向(-0.5,-0.5)是左下角坐标,(0.5,0.5)是右上角坐标,, ...

  10. [翻译]现代Linux系统上的栈溢出攻击【转】

    转自:http://www.codeweblog.com/%E7%BF%BB%E8%AF%91-%E7%8E%B0%E4%BB%A3linux%E7%B3%BB%E7%BB%9F%E4%B8%8A%E ...