Struts秘籍之第2段：第3.8式：使用JavaScript动态改变选择项-白红宇

Struts秘籍之第2段：第3.8式：使用JavaScript动态改变选择项

阅读量：6036 次

发布时间：2019-06-20

本文共 5886 字，大约阅读时间需要 19 分钟。

第3.8式. 使用JavaScript动态改变选择项

问题

你希望使用JavaScript 来根据从应用模型中获得的数据来动态设置显示在一个HTML select元素中的条目。

动作要领

使用Struts logic:iterate标签来为不同的选项集创建JavaScript 数组。然后使用JavaScript 的onchange事件句柄来在运行时修改options集。Example 3-8就展示了一个完整的JSP ，在其中JavaScript 数组是使用Struts 标签动态创建的。changeOptions事件句柄函数使用JavaScript数组重设了select控件的选项.

Example 3-8. 使用Struts产生DHTML

<% @ page contentType="text/html;charset=UTF-8" language="java" %>

<% @ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>

<% @ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>

<% @ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>

<html>

<head>

<title> - JavaScript Example</title>

// 为第一组选项创建一个数组

fooArray = new Array( );

<logic:iterate id="fooValue" indexId="ctr"

name="MyForm" property="fooList">

fooArray[<bean:write name="ctr"/>] =

new Option("<bean:write name='fooValue'/>",

"<bean:write name='fooValue'/>",

false, false);

</logic:iterate>

// 为第二组选项创建数组

barArray = new Array( );

<logic:iterate id="barValue" indexId="ctr"

name="MyForm" property="barList">

fooArray[<bean:write name="ctr"/>] =

new Option("<bean:write name='barValue'/>",

"<bean:write name='barValue'/>",

false, false);

</logic:iterate>

function changeOptions(var control) {

// control 是触发的控件

// baz 是select 控件

baz = document.MyForm.baz;

baz.options.length=0;

if (control.value == 'Foo')

bazArray = fooArray;

else

bazArray = barArray;

for (i=0; i < bazArray.length; i++)

baz.options[i] = bazArray[i];

}

</script>

</head>

<body>

<html:form name="MyForm" action="processMyForm">

<html:radio property="fooBar" value="Foo"

οnclick="changeOptions(this);"/> Foo<br/>

<html:radio property="fooBar" value="Bar"

οnclick="changeOptions(this);"/> Bar<br/>

Baz: <html:select property="baz">

</html:select>

</html:form>

</body>

</html>

动作变化

你可以使用Struts 来产生JavaScript，就像用它生成HTML一样。某些开发人员认为JavaScript 简直是"恶魔"；实际上，它只是稍微有那么一点坏而已。考虑这个编程原则：如果JavaScript 能使你的应用更好而且用户喜欢，那就用它。但是用它的原则是，仍然将你的应用逻辑保留在你的业务层，而不是放在页面中。Struts 对此有帮助。

用一个具体的例子可以说明这个原则。假定你想要一个用户选择他喜欢的编程语言，并且，据此选择他喜欢的IDE。语言可以通过使用单选按钮来选择，而IDE 将通过下拉列表来选择。如果语言是Java, 那么IDE 下拉列表将显示诸如Eclipse, Net Beans, IDEA, 等等。而如果语言是C#, 则下拉列表显示Visual Studio 和SharpDevelop。

Example 3-9 展示了持有这些数据的action form。

Example 3-9. ActionForm for favorite language/IDE

package com.oreilly.strutsckbk;

import org.apache.struts.action.ActionForm;

public final class MyForm extends ActionForm {

private static String[] javaIdes =

new String[] {"Eclipse", "IDEA", "JBuilder",

"JDeveloper", "NetBeans"};

private static String[] csharpIdes =

new String[] {"SharpDevelop", "Visual Studio"};

public String[] getJavaIdes( ) {return javaIdes;}

public String[] getCsharpIdes( ) {return csharpIdes;}

public String getLanguage( ) {

return language;

}

public void setLanguage(String language) {

this.language = language;

}

public String getIde( ) {

return ide;

}

public void setIde(String ide) {

this.ide = ide;

}

private String language;

private String ide;

}

Example 3-10 则列出了渲染输入页面的JSP (favorite_language.jsp) 。这个例子和基本动作中的例子有些相似。

Example 3-10. JSP Page using -rendered DTHML

<% @ page contentType="text/html;charset=UTF-8" language="java" %>

<% @ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>

<% @ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>

<% @ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>

<html>

<head>

<title> - JavaScript Example</title>

// 为第一组选项创建数组

javaIdesArray = new Array( );

<logic:iterate id="ide" indexId="ctr"

name="MyForm" property="javaIdes">

javaIdesArray[<bean:write name="ctr"/>] =

new Option("<bean:write name='ide'/>",

"<bean:write name='ide'/>",

false, false);

</logic:iterate>

// 为第二组选项创建数组

csharpIdesArray = new Array( );

<logic:iterate id="ide" indexId="ctr"

name="MyForm" property="csharpIdes">

csharpIdesArray[<bean:write name="ctr"/>] =

new Option("<bean:write name='ide'/>",

"<bean:write name='ide'/>",

false, false);

</logic:iterate>

function changeOptions(control) {

ideControl = document.MyForm.ide;

ideControl.options.length=0;

if (control.value == 'Java')

ideArray = javaIdesArray;

else

ideArray = csharpIdesArray;

for (i=0; i < ideArray.length; i++)

ideControl.options[i] = ideArray[i];

}

</script>

</head>

<body>

<html:form action="/admin/ViewFavoriteLanguage">

What's your favorite programming language?<br/>

<html:radio property="language" value="Java"

οnclick="changeOptions(this);"/> Java<br/>

<html:radio property="language" value="C-Sharp"

οnclick="changeOptions(this);"/> C-Sharp<br/>

<p>What's your favorite development tool?<br/>

IDE: <html:select property="ide"/>

</p>

<html:submit/>

</html:form>

</body>

</html>

茜套在head元素中的script块包含了JavaScript。logic:iterate标签遍历JavaBean 属性以创建两个JavaScript 数组：一个针对IDE，另一个针对C# IDE。每一个数组都包含一组Option的JavaScript 对象。一个Option对象表示HTML select控件中的一个选项。这些对象在其构造器重使用了四个参数：用来现实的text 值，表单提交时传递的值，指示该值是否是默认值的一个Boolean值，以及指示其是否是当前选择的Boolean值。

用于修改选项的JavaScript 函数紧跟logic:iterate循环。这个函数是个纯粹的静态JavaScript。触发修改的单选按钮是作为参数传递给这个函数的。如果单选按钮的当前值是那么e select控件则根据表达Java IDE的Option对象组装。否则，控件使用表达C# IDE的Option对象组装。

HTML body 则包含表单，使用Struts html标签来渲染。Struts 标签通过on函数属性来支持JavaScript 的改变监听器。对 radio 按钮来说，onclick监听器可正常工作。传递给这个函数的唯一参数是对HTML radio button的引用。当页面被第一次渲染时，看起来应该是这样：

Figure 3-1. Form using DHTML and

一旦你点击一个单选按钮，下拉列表中的选项便会根据来自form bean中的数据动态组装。下图显示了点击Java radio button的显示结果：

Figure 3-2. Dynamically rendered drop-down menu

类似的，如果你点击C-Sharp radio button，下来列表中的选项也会变化以反映对应的JavaScript 数组中的值。

JSTL 其实也可以用于上述地方代替Struts bean和logic标签。比如，使用JSTL c:forEach和c:out来代替logic:iterate和bean:write。这些标签可以产生相同的效果。

javaIdesArray = new Array( );

<c:forEach var="ide" varStatus="status"

items="${MyForm.javaIdes}">

javaIdesArray[<c:out value="${status.index}"/>] =

new Option("<c:out value='${ide}'/>",

"<c:out value='${ide}'/>",

false, false);