不说话，直接上代码，其中函数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>

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. java实现图的深度优先遍历和广度优先遍

    首先需要知道的是,图的深度优先遍历是一种类似于树的前序遍历方式,即选择一个入口节点,沿着这个节点一直遍历下去,直至所有节点都被访问完毕:如果说,图的深度优先遍历类似于树的前序遍历的话,那么图的广度优先 ...

  2. 习题：过路费（kruskal+并查集+LCA）

    过路费  [问题描述]在某个遥远的国家里,有 n 个城市.编号为 1,2,3,…,n.这个国家的政府修 建了 m 条双向道路,每条道路连接着两个城市.政府规定从城市 S 到城市 T 需 要收取的过路费 ...

  3. hihoCoder #1758 加减

    $\DeclareMathOperator{\lowbit}{lowbit}$ 题目大意 对于一个数 $x$,设它最低位的 1 是第 $i$ 位,则 $\lowbit(x)=2i$ . 例如 $\lo ...

  4. g2o安装

    1.安装依赖项 sudo apt-get install libeigen3-dev libsuitesparse-dev libqt4-dev qt4-qmake 2.安装依赖项  libqglvi ...

  5. id_rsa id_rsa.pub

    id_rsa  私钥 id_rsa.pub  公钥 https://blog.csdn.net/qq_36663951/article/details/78749217 https://blog.cs ...

  6. 检测字符串当中x与o的数目是否相等

    题目如上 答案 function XO(str) { var arr = str.split(""), xCount = , oCount = ; var reX = /x/i, ...

  7. iOS飘雪的动画小demo

    ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIViewController{ UIImage ...

  8. transfered jquery plugin practice!

    jQuery插件开发入门 发表于 2014年05月23日 by 天涯孤雁 被浏览 20,897 次 ======2014-5-27 更新======= Require.js中使用jQuery 插件请查 ...

  9. hdu 3518 Boring counting 后缀数组 height分组

    题目链接 题意 对于给定的字符串,求有多少个 不重叠的子串 出现次数 \(\geq 2\). 思路 枚举子串长度 \(len\),以此作为分界值来对 \(height\) 值进行划分. 显然,对于每一 ...

  10. hdu 5972 Regular Number 字符串Shift-And算法 + bitset

    题目链接 题意 给定两个串\(S,T\),找出\(S\)中所有与\(T\)匹配的子串. 这里,\(T\)的每位上可以有若干(\(\leq 10\))种选择,匹配的含义是:对于\(S\)的子串的每一位, ...