div及２级联动表的使用心得

最新推荐文章于 2021-10-20 17:10:26 发布
最新推荐文章于 2021-10-20 17:10:26 发布
阅读量144 收藏
点赞数
文章标签： XSL Servlet XML JSP JavaScript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pingwei000/article/details/83639964
版权
2级联动表部分代码：
先将需要隐藏的内容写到以下的<div>标签中该标签的属性写成如下格式：
<div id="xxxx" style="display:none;">
</div>
以上代码表示，在div块中的代码将会被隐藏然后再javaScript代码中可写出方法使其显示,代码如下：
<script>
function test(){
var a=document.getElementById("xxx");
a.style.display="block";
}
2级联动表可通过该功能来实现，例：
html代码：<%@ page language="java" import="java.util.*" pageEncoding="GB2312"%>
<%
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 'index.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">
-->
<link href="./css/main.css" rel="stylesheet" type="text/css" />
</head>
<script src="./js/tool.js"></script>

<link href="./css/bodyStyle.css" rel="stylesheet" type="text/css">
<BODY BGCOLOR="ffffff" TEXT="000000" LINK="FF8000" VLINK="FF8000" Marginwidth=250 marginheight=250 leftmargin=100>
<table><tr align=center width='100%'><td colspan="2"><font size="6" color="#0000FF">Wdems示例展示首页</td><tr></table>
<jsp:include flush="true" page="test.jsp"></jsp:include>
<form name="form2">
<div id="frames">
<fieldset>
<legend>打印参数设置</legend>
<select name ="filename" onClick="setFileName()">
<option value="pass_goods_in">pass_goods_in</option>
<option value="DATE_and_HIDDEN_and_LIST_test_editmode_3">DATE_and_HIDDEN_and_LIST_test_editmode_3</option>
<option value="real">real</option>
<option value="TCertG21_0003">TCertG21_0003</option>
<option value="PICC">PICC</option>
<option value="AD_CONTRACT">AD_CONTRACT</option>
<option value="ecrPrnt">ecrPrnt</option>
<option value="test_use">test_use</option>
<option value="code128">code128</option>
<option value="stat">stat</option>
<option value="stat1">stat1</option>
<option value="CERT_B">FORMB</option>
<option value="FORM_P">FORM_P</option>
<option value="pass_goods_in">pass_goods_in</option>
<option value="goods_out">goods_out</option>
<option value="pass_goods_out">pass_goods_out</option>
<option value="chonfu_test">chonfu_test</option>
<option value="nine">九城表单测试</option>
<option value="FO-Element-test">FO元素和属性测试</option>
<option value="schemaobj_test">schemaobj_test</option>
<option value="font_text">font_text</option>
<option value="xialaliebiao_text">xialaliebiao_text</option>
<option value="riqi_text">riqi_text</option>
<option value="xialaliebiaowenti_text">xialaliebiaowenti_text</option>
<option value="riqiwenti_text">riqiwenti_text</option>
<option value="font_text2">font_text2</option>
<option value="baoxian">baoxian</option>
</select>
<TABLE width="700" height="40" BORDER=0 CELLPADDING=0 CELLSPACING=0>
<tr width="200">
<td width="150">
<select id="sle0" name="sle0" onClick="setValues1()">
<option value="change">请选择数据处理方式</option>
<option value="server">服务器端解析数据</option>
<option value="0">统一客户端</option>
</select>
</td>
<td width="150">
<div id="htmlPrintMode" style="display:none;">
<table>
<select id="sle1"name="sle1" onClick="setValues1()">
<option>前台显示</option>
<option value="2">后台打印</option>
<option value="3">生成文件</option>
</select>
</table>
</div>
</td>
<td width="20">
<div id="htmlPrintType" style="display:none;">
<table>
<select id="sle2" name="sle2" onClick="setValues1()">
<option >分组打印</option>
<option value="pr">打印</option>
<option value="4">打印PCL文件</option>
<option value="5">打印PS文件</option>
</select>
</table>
</div>
</td>
<td width="150">
<div id="htmlPrintFile" style="display:none;">
<table>
<select id="sle3" name="sle3" onClick="setValues1()">
<option value="8">生成PCL文件</option>
<option value="9">生成PS文件</option>
<option value="10">生成TXT文件</option>
<option value="11">生成png文件</option>

</select>
</table>
</div>
</td>
<td width="400">
<div id="htmlPrinterName" style="display:none;">
<table>请输入打印机名称<input type="text" id="printName" name="printName" value=""/></table>
</div>
</td>
</tr>
<tr align="right">隐藏打印并关闭按钮<input type="checkbox" id="printAndClose" name="printAndClose" value="no" ></tr>
<tr>不允许打印<input type="checkbox" id="isPrint" name="isPrint" value="no"></tr>
<tr>使用平滑处理<input type="checkbox" id="antialias" name="antialias" value="yes"></tr>
<tr>可进行编辑<input type="checkbox" id="isEdit" name="isEdit" value="yes"></tr>
<tr>工具栏位置<select name="tool" id="tool" value="">
<option value="top">top</option>
<option value="left">left</option>
<option value="right">right</option>
<option value="hide">hide</option>
</select>
</tr>
<tr>显示比例测试<input type="text" name="percent" id="percent"></tr>


</table>
<div id="htmlbut1" style="display:none;">
数据读取方式 <select name="data" id="data" value="">
<option value="readFile">直接读取文件</option>
<option value="servlet">通过Servlet读取文件</option>
</select>
<br><br><input type="button" value="Test" onClick="client()"/>
</div>
<div id="htmlbut2" style="display:none;">
<input type="button" value="Test" onClick="server()"/>
</div>
<div id="htmlbut3" style="display:none;">
<input type="button" value="提交" onClick="openWindow()"/>
</div>
</div>

</form>

<div id="htmlapp" style="display:none;">
<jsp:include page="/wisii/jsp/init.jsp" flush="true" />
</div>

</body>
</html>
javaScipt代码：
var str="";
var args1="AllBrowseTask,";
var args4="-servlet,/servlet/AllClientServlet?filename=";
var args2="frontServletTask,servlet/ClientfrontServlet?filename=";
var args3="BackServletTask,servlet/ClientfrontServlet?filename=";
var args5="-xml,";
var args6=",-xsl,"
function wisiiRecall()
{

}

function setValues1(){
var filename=document.all.filename.value;

var htmlPrintMode=document.getElementById("htmlPrintMode");
var htmlPrintType=document.getElementById("htmlPrintType");
var htmlPrintFile=document.getElementById("htmlPrintFile");
var htmlPrinterName=document.getElementById("htmlPrinterName");
var htmlbut1=document.getElementById("htmlbut1");
var htmlbut2=document.getElementById("htmlbut2");
var htmlbut3=document.getElementById("htmlbut3");

var sele0=document.forms[0].elements[2];
var select0=sele0.options[sele0.selectedIndex].value;
var sele1=document.forms[0].elements[3];
var select1=sele1.options[sele1.selectedIndex].value;
var sele2=document.forms[0].elements[4];
var select2=sele2.options[sele2.selectedIndex].value;
var sele3=document.forms[0].elements[5];
var select3=sele3.options[sele3.selectedIndex].value;

if(select0 == 0){
htmlbut1.style.display="block"
htmlbut2.style.display="none";
htmlbut3.style.display="none";
htmlPrintMode.style.display="block";
htmlPrintType.style.display="none";
htmlPrintFile.style.display="none";
htmlPrinterName.style.display="none";
htmlapp.style.display="block";
str=",-awt";
if(select1==2){
htmlbut1.style.display="block"
htmlbut2.style.display="none";
htmlbut3.style.display="none";
htmlPrintMode.style.display="block";
htmlPrintType.style.display="block";
htmlPrintFile.style.display="none";
htmlPrinterName.style.display="none";
htmlapp.style.display="none";
if(select2=="pr"){
str="";
str=",-print";
}else
{
str="";
str=",-printSquence";
}
if(select2==4){
htmlbut1.style.display="block"
htmlbut2.style.display="none";
htmlbut3.style.display="none";
htmlPrintMode.style.display="block";
htmlPrintType.style.display="block";
htmlPrintFile.style.display="none";
htmlPrinterName.style.display="block";
htmlapp.style.display="none";
str="";
str=",-pcl";
}
else if(select2==5){
htmlbut1.style.display="block"
htmlbut2.style.display="none";
htmlbut3.style.display="none";
htmlPrintMode.style.display="block";
htmlPrintType.style.display="block";
htmlPrintFile.style.display="none";
htmlPrinterName.style.display="block";
htmlapp.style.display="none";
str="";
str=",-ps";
}
}
else if(select1 == 3){
htmlbut1.style.display="block"
htmlbut2.style.display="none";
htmlbut3.style.display="none";
htmlPrintMode.style.display="block";
htmlPrintType.style.display="none";
htmlPrintFile.style.display="block";
htmlPrinterName.style.display="none";
htmlapp.style.display="none";
str="";
str=",-pcl,Mypcl.pcl"
if(select3==8){
str="";
printerName=""
str=",-pcl,Mypcl.pcl"
}else if(select3==9){
str="";
str=",-ps,Myps.ps"
}else if(select3==10){
str="";
str=",-txt,Mytxt.txt"
}else if(select3==11){
str="";
str=",-png,Mypng.png"
}
}
}else if(select0=="server"){
htmlbut1.style.display="none"
htmlbut2.style.display="block";
htmlbut3.style.display="none";
htmlPrintMode.style.display="block";
htmlPrintType.style.display="none";
htmlPrintFile.style.display="none";
htmlPrinterName.style.display="none";
htmlapp.style.display="block";
str=args2+filename+",-awt";
if(select1==2){
htmlbut1.style.display="none"
htmlbut2.style.display="block";
htmlbut3.style.display="none";
htmlPrintMode.style.display="block";
htmlPrintType.style.display="block";
htmlPrintFile.style.display="none";
htmlPrinterName.style.display="none";
htmlapp.style.display="none";
if(select2=="pr"){
str="";
str=args3+filename+",-print";
}else
{
str="";
str=args3+filename+",-printSquence";
}
if(select2==4){
htmlbut1.style.display="none"
htmlbut2.style.display="block";
htmlbut3.style.display="none";
htmlPrintMode.style.display="block";
htmlPrintType.style.display="block";
htmlPrintFile.style.display="none";
htmlPrinterName.style.display="block";
htmlapp.style.display="none";
str="";
str=args3+filename+",-pcl";
}
else if(select2==5){
htmlbut1.style.display="none"
htmlbut2.style.display="block";
htmlbut3.style.display="none";
htmlPrintMode.style.display="block";
htmlPrintType.style.display="block";
htmlPrintFile.style.display="none";
htmlPrinterName.style.display="block";
htmlapp.style.display="none";
str="";
str=args3+filename+",-ps";
}
}
else if(select1 == 3){
htmlbut1.style.display="none"
htmlbut2.style.display="block";
htmlbut3.style.display="none";
htmlPrintMode.style.display="block";
htmlPrintType.style.display="none";
htmlPrintFile.style.display="block";
htmlPrinterName.style.display="none";
htmlapp.style.display="none";
str="";
str=args3+filename+",-pcl,Mypcl.pcl"
if(select3==8){
str="";
printerName=""
str=args3+filename+",-pcl,Mypcl.pcl"
}else if(select3==9){
str="";
str=args3+filename+",-ps,Myps.ps"
}else if(select3==10){
str="";
str=args3+filename+",-txt,Mytxt.txt"
}else if(select3==11){
str="";
str=args3+filename+",-png,Mypng.png"
}
}



}else{
htmlbut1.style.display="none";
htmlbut2.style.display="none";
htmlbut3.style.display="block";
htmlPrintMode.style.display="none";
htmlPrintType.style.display="none";
htmlPrintFile.style.display="none";
htmlPrinterName.style.display="none";
htmlapp.style.display="none";
//str="AllBrowseTask,"+xml+filename+".xml"+xsl+filename+".xsl,-awt";
}
}
function client(){
setValues1();
printerName=document.getElementById("printName").value;

var filename=document.all.filename.value;

var printAndClose=document.getElementsByName("printAndClose");
var isPrint=document.getElementsByName("isPrint");
var antialias=document.getElementsByName("antialias");
var isEdit=document.getElementsByName("isEdit");
var percent=document.getElementById("percent").value;
var tool=document.all.tool.value;
var data=document.all.data.value;


if(isPrint[0].checked){
isPrint=",-isPrint,no";
}else{
isPrint="";
}

if(printAndClose[0].checked){
printAndClose=",-printAndClose,no";
}else{
printAndClose="";
}

if(antialias[0].checked){
antialias=",-antialias,yes";
}else{
antialias="";
}

if(isEdit[0].checked){
isEdit=",-editable,yes";
}else{
isEdit="";
}
if(percent==""){
percent=",-percent,100";
}else if(percent<=20){
percent=",-percent,20";
}else if(percent>=500){
percent=",-percent,500";
}else{
percent=",-percent,"+percent;
}

if(tool==""){
tool="";
}else if(tool=="top"){
tool=",-location,top"
}else if(tool=="right"){
tool=",-location,right"
}else if(tool=="left"){
tool=",-location,left"
}else if(tool=="hide"){
tool=",-location,hide"
}

if(data=="servlet"){
data=args4+filename;
}else{
data=args5+filename+".xml"+args6+filename+".xsl";
}

if(printerName==""){
printerName="";
}else{
printerName=","+printerName;
}

str=args1+data+str+printerName+isPrint+printAndClose+antialias+percent+tool+isEdit;

document.applets.TestApplet.askWiApplet(str);
str="";
document.getElementById("printName").value="";
}

function server(){
setValues1();
printerName=document.getElementById("printName").value;

var filename=document.all.filename.value;

var printAndClose=document.getElementsByName("printAndClose");
var isPrint=document.getElementsByName("isPrint");
var antialias=document.getElementsByName("antialias");
var isEdit=document.getElementsByName("isEdit");
var percent=document.getElementById("percent").value;
var tool=document.all.tool.value;
var data=document.all.data.value;

if(isPrint[0].checked){
isPrint=",-isPrint,no";
}else{
isPrint="";
}

if(printAndClose[0].checked){
printAndClose=",-printAndClose,no";
}else{
printAndClose="";
}

if(antialias[0].checked){
antialias=",-antialias,yes";
}else{
antialias="";
}

if(isEdit[0].checked){
isEdit=",-editable,yes";
}else{
isEdit="";
}
if(percent==""){
percent=",-percent,100";
}else if(percent<=20){
percent=",-percent,20";
}else if(percent>=500){
percent=",-percent,500";
}else{
percent=",-percent,"+percent;
}

if(tool==""){
tool=",-location,top";
}else if(tool=="top"){
tool=",-location,top"
}else if(tool=="right"){
tool=",-location,right"
}else if(tool=="left"){
tool=",-location,left"
}else if(tool=="hide"){
tool=",-location,hide"
}

if(data=="servlet"){
data=args4+filename;
}else{
data=args5+filename+".xml"+args6+filename+".xsl";
}

if(printerName==""){
printerName="";
}else{
printerName=","+printerName;
}

str=str+printerName+isPrint+printAndClose+antialias+percent+tool+isEdit;

document.applets.TestApplet.askWiApplet(str);
str="";
document.getElementById("printName").value="";

}

function setFileName(){
setValues1();
}
function openWindow(){
window.open("servlet/Servlet?filename="+document.all.filename.value+"&percent="+document.all.percent.value+"&isPrint="+document.all.isPrint.checked+"&printAndClose="+document.all.printAndClose.checked+"&antialias="+document.all.antialias.checked+"&location="+document.all.tool.value+"&isEdit="+document.all.isEdit.checked);
}
pingwei000
关注
基于Vue开发基础的应用——二级联动菜单演示
qingchayujiu的博客
10-21 2587
基于Vue开发基础的应用——二级联动菜单演示 实验目的 制作一个二级菜单，通过二级联动菜单选择类别，当第一个菜单选项改变时，第二个菜单中的选项也会随之改变 实现效果 实现代码 head部分： 通过src引入vue.js文件 <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js"></script> </head> b
html联动数据库,实现jsp页面二级下拉框联动，同时实时读取数据库数据
weixin_39685578的博客
06-04 597
今天小编带领大家一起学习有关编程语言的知识，让我们一起感受知识的力量c语言编程入门在一个jsp页面实现二级下拉框联动，实时读取数据，这个方法非常有用，只需要修改很小的地方就可以使用。的文件，serch.jsp，main.js，bytetostr.js，先讲一下main.js，这是script，其中注意修改jsp页面名称。以下为引用的内容：function findObject(fName,init...
div模拟select框的实现省市联动三级和二级
04-24
div模拟select框的实现省市联动三级,div模拟select框的实现省市联动二级,共3套代码
电商平台项目之商品品类多级联动实现
Nicky's blog
11-03 6978
在淘宝、京东等电商网站，其门户网站都有一个商品品类的多级联动，鼠标移动，就显示，因为前端不是我做的，所以不说明前端实现，只介绍后端实现。 搭建部署SpringBoot环境 配置文件配置： 开启了对Thymeleaf模块引擎的支持 server: port: 8081 #logging: # config: classpath:logback_spring.xml # level: # ...
JavaScript实现Div二级联动效果（响应键盘按钮）
weixin_34392906的博客
09-05 382
最近在学习javascript，给了一个题目给我，写一个二级联动效果。当做练习。写一个二级联动的HTML页面，具体要求如下：1、页面支持通过键盘上的上下左右键实现焦点的移动2、页面左侧为父栏目名称，如电影、电视剧、体育、音乐、少儿、综艺、咨询等3、焦点在对应父栏目上时，展示子栏目信息，如电影栏目下有1,2，3,4,5等子栏目；4、页面数据为静态数据，可以配置修改；效果：&lt...
三级联动 div层
JAVA
09-10 225
var div=$("&lt;div/&gt;").attr("id","_contents"); document.writeln($("&lt;span/&gt;").append(div).html()); var doSelectObj=""; /** * @param {} obj//传值元素 */ function setTimeById(id
jquery实现多级联动
延宝小白马的博客
06-18 575
我们在开发中，经常会遇到控件选择联动的情况，最常见的莫过于省市县了，当然还有其它不同层级的联动。好了，下面开始进行多久联动了。 详细代码如下: <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+
html5地区三级联动
03-19
4. 响应式设计：考虑到移动端的屏幕尺寸差异，需要确保三级联动组件在不同设备上都能正常显示和使用。利用媒体查询(`@media`)和Flexbox或Grid布局，我们可以实现自适应的界面设计。 5. 兼容性考虑：虽然HTML5的大...
使用vue开发移动端管理后台
ZJW222的博客
03-07 3348
独立完成一个移动端项目(不是很明白为何会有这样的商品管理后台)，还是有些经验不足，包括对产品的全局思考，对插件的选择等，都有考虑不周的缺点，导致自己中途想换图形界面插件，浪费了点时间，这里记录下，总结下经验，理一下思路。 1.对于项目的一些心得与体会 首先的一点，就是，对于图形界面框架的选型，这个很重要，对于一项目来说，开始动手前就要对项目的设计图有个完整的了解，以便于自己选择插件或者框架； ...
ECharts使用心得——矩阵树图
weixin_30735745的博客
05-05 3600
1. 缘起 最近实验室 boss 让用矩形树图做一下研究数据的展示，囧，矩形树图是什么鬼。问了问师兄，说用 R 语言可以实现，让我去研究一下。 = =，那这周不是不用干别的了。 刚好最近在研究百度出的 ECharts ，搜了搜竟然有矩形树图的模块，真是感动啊眼泪都要出来了。立马研究了一下，结果还可以，能实现我要的效果。 就在博客里总结一下吧，希望对你有帮助。 2.1 用 ECharts 实现...
二级下拉列表联动 select 网页 html5
03-30
二级下拉列表联动 select 网页 html5 学院、专业 选择的下拉列表 下载可用！！！
div模拟select自定义下拉列表框（jQuery）
09-19
jQuery+div+css模拟select自定义下拉列表框，简单轻巧实用。
原生JS用普通 div 实现二级联动
杜伊沫的博客
04-04 554
用div实现二级联动封装的函数较多，大家看起来会很困难，这个实现只是我自己突发其想才这么实现的，大家可以看 https://blog.csdn.net/qq_36091461/article/details/105317483 这个是用select标签实现的，省去了许多操作，不过实现的的思想都是一样的，div实现二级联动的实现是多了一些select本身的功能 原生JS用普通 div 实现二级联动...
div展示联动，js二级联动城市选择，非下拉框
Cream_Cicilian的博客
05-21 1822
做一个医学项目的时候，仿照丁香园，有一个城市二级联动的效果。本来可以用最简单的下拉框，却自己作死，一定要漂亮的。结果花了两天把逻辑梳理了出来。还不一定是最简单的，但是我实在没有在网上找到这个效果的代码，只有笨笨的摸索。 最后效果： 代码： &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &
div伪装select下拉列表
热门推荐
小白努力走
08-19 1万+
html: select美化自定义下拉框样式 - 站长素材 *{margin:0;padding:0;} select{outline:none;} ul{list-style:none;} a{text-decoration:none;} select{display: none;} .select_box{font-family: "宋体"; font
多级关联下拉选择框
土匪头子的专栏
06-22 1059
<br /><table><tr><td><br /><div style="background-color:#3366CC;width:80px;height:30px;text-align:center;<br />padding:3px;border-bottom:1px solid #FFFFFF;z-index:1;"<br />onmouseover="myMenu.style.display='block'"<br />onmouseout="myMenu.style.display='no
用div模拟下拉列表
旷古的寂寞的博客
04-29 493
图例: 显示全部 显示全部 隐藏全部 反选全部 全部车源总量 全部个人车源 全部商家车源 273.cn 2sc.sohu.com 51auto.com 58.com 99haoche.com baixing.com che101.com che168.com chemao.com.cn cn2che.com ganji.com guazi.com hao.autohome.com.c
javascript原生实现二级联动下拉菜单
程序员小王的博客
10-20 8757
JS原生实现二级联动菜单（市/区县） ???? Java学习路线：搬砖工的Java学习路线 ???? 作者：程序员小王 ???? 程序员小王的博客：https://www.wolai.com/wnaghengjie/ahNwvAUPG2Hb1Sy7Z8waaF ???? 扫描主页左侧二维码，加我微信 一起学习、一起进步 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? 一、下拉列表二级/三级联动示意图 二、js中操作下拉列表的相关属性 selObj.value 获取下拉列表中选中项的值 selObj
html js二级列表,JS实现多级下拉列表框
weixin_29767975的博客
06-27 682
一、编写HTML二、编写CSS.disabled-div {display : none;}#hm-select-div input {width : 176px;height: 30px;border-radius: 3px;float:left;display:block;padding:6px 12px;font-size: 14px;line-height: 1.42854143;outl...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值