📄 multiselect.jsp
字号:
<%@ page contentType="text/html;charset=GBK"%>
<%@ taglib uri="/tags/web-html" prefix="html" %>
<%@ page import="java.util.*"%>
<%@ page import="html.*"%>
<%@ page import="org.loushang.web.taglib.util.*"%>
<%@ page import="org.loushang.web.taglib.util.skin.SkinUtils"%>
<%@ taglib uri="/tags/web-loushang" prefix="loushang"%>
<%@ taglib uri="/tags/web-i18n" prefix="web"%>
<link rel="stylesheet" type="text/css" href="<loushang:ui css='css-xp1.css'/>">
<web:js src="MultiSelect.js"/>
<html>
<head>
<title>select组件</title>
<%
Vector options = new Vector();
options.add(new LabelValueBean("Label 0", "Value 0", "Key1"));
options.add(new LabelValueBean("Label 1", "Value 1", "Key1"));
options.add(new LabelValueBean("Label 2", "Value 2", "Key1"));
options.add(new LabelValueBean("Label 3", "Value 3", "Key1"));
options.add(new LabelValueBean("Label 4", "Value 4", "Key1"));
options.add(new LabelValueBean("Label 5", "Value 5", "Key2"));
options.add(new LabelValueBean("Label 6", "Value 6", "Key2"));
options.add(new LabelValueBean("Label 7", "Value 7", "Key2"));
options.add(new LabelValueBean("Label 8", "Value 8", "Key2"));
options.add(new LabelValueBean("Label 9", "Value 9", "Key3"));
request.setAttribute("options", options);
Map map = new HashMap();
map.put("id","2");
map.put("name","web-html组件");
map.put("code","Value 3");
map.put("codes",new String[]{"Value 2", "Value 4","Value 6"});
map.put("optionsCollection",options);
request.setAttribute(Global.getString("html.data"), map);
%>
</head>
<body scroll="auto">
<div style="overflow:true;height:400; width:100%">
<table width="100%">
<tr>
<td><label class="title">select组件</label></td>
<%
String file=request.getServletPath().substring(1);
String app=request.getContextPath();
%>
<td><label class="title">url：<%=file%></label></td>
<td align="right" valign="bottom" nowrap> [<a href="<%=app%>/src.jsp?target=<%=file %>" target="source">源代码</a>] </td>
</tr>
</table>
<hr>
<form>
<table border="0" width="100%">
<p>
s1变化,s2变化
s1:<html:multiSelect name="s1" onchange="ss.fillData('s1','s2')" value="1">
<html:multiOption value="1">1</html:multiOption>
<html:multiOption value="2">2</html:multiOption>
<html:multiOption value="3">3</html:multiOption>
<html:multiOption value="4">4</html:multiOption>
</html:multiSelect>
s2:<html:multiSelect name="s2" value="11">
<html:multiOption filterKey="1" value="11">tex11</html:multiOption>
<html:multiOption filterKey="1" value="12">tex12</html:multiOption>
<html:multiOption filterKey="1" value="13">tex13</html:multiOption>
<html:multiOption filterKey="2" value="21">tex21</html:multiOption>
<html:multiOption filterKey="2" value="22">tex22</html:multiOption>
<html:multiOption filterKey="2" value="23">tex23</html:multiOption>
<html:multiOption filterKey="3" value="31">tex31</html:multiOption>
<html:multiOption filterKey="3" value="32">tex32</html:multiOption>
<html:multiOption filterKey="3" value="33">tex33</html:multiOption>
<html:multiOption filterKey="4" value="41">tex41</html:multiOption>
<html:multiOption filterKey="4" value="42">tex42</html:multiOption>
<html:multiOption filterKey="4" value="43">tex43</html:multiOption>
</html:multiSelect>
<p>
s3变化,s4、s5同时变化
s3:<html:multiSelect name="s3" onchange="changes3()" value="Key2">
<html:multiOption value="Key1">1</html:multiOption>
<html:multiOption value="Key2">2</html:multiOption>
<html:multiOption value="Key3">3</html:multiOption>
</html:multiSelect>
s4:<html:multiSelect name="s4" property="code" size="1">
<html:multiOptions collection="options" property="value" labelProperty="label" filterKey="key"/>
</html:multiSelect>
s5:<html:multiSelect name="s5" property="code" size="1">
<html:multiOptions collection="options" property="value" labelProperty="label" filterKey="key"/>
</html:multiSelect>
<p>
s6变化,s7变化;s7变化,s8变化
s6:<html:multiSelect name="s6" value="Key2" onchange="multi()">
<html:multiOption value="Key1">1</html:multiOption>
<html:multiOption value="Key2">2</html:multiOption>
<html:multiOption value="Key3">3</html:multiOption>
</html:multiSelect>
s7:<html:multiSelect name="s7" property="code" onchange="ss.fillData('s7','s8')" size="1">
<html:multiOptions collection="options" property="value" labelProperty="label" filterKey="key"/>
</html:multiSelect>
s8:<html:multiSelect name="s8" property="code" size="1">
<html:multiOptions collection="options" property="value" labelProperty="label" filterKey="value"/>
</html:multiSelect>
<p>
x1变化,x2变化
<tr>
x1:
<span><html:multiSelect name="x1" value="1" onchange="changex1()">
<html:multiOption value="1">1</html:multiOption>
<html:multiOption value="2">2</html:multiOption>
<html:multiOption value="3">3</html:multiOption>
<html:multiOption value="4">4</html:multiOption>
</html:multiSelect></span>
x2:
<span>
<html:multiSelect name="x2" value="">
</html:multiSelect>
</span>
</tr>
</table>
</form>
</div>
</body>
</html>
<script language="javascript">
var ss=new MultiSelect("ss");
//触发s1的onchange事件
document.all('s1').onchange();
//s3变化,s4,s5均变化
function changes3(){
ss.fillData('s3','s4');
ss.fillData('s3','s5');
}
document.all('s3').onchange();
//s6变化,s7变化;s7变化,s8变化
function multi(){
ss.fillData('s6','s7');
document.all("s7").onchange();
}
document.all("s6").onchange();
//xmlhttp方式
function changex1(){
ss.fillData('x1','x2',"xml.jsp?x1="+document.all('x1').value);
}
document.all("x1").onchange();
</script>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -