使用dwr实现下拉框级联和js实现动态选择option的selected状态方法总结

一。第一次使用dwr，原因是需要实现级联。第一次用js动态实现option的selected的方法，整蛊了2天总算把这些问题给解决。

1.配置web.xml

<!-- DWR配置 -->
<servlet>
<servlet-name>dwr-test</servlet-name>
<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>scriptCompressed</param-name>
<param-value>false</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>

<servlet-mapping>
<servlet-name>dwr-test</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>

2.看jsp页面：

<mce:script type="text/javascript" src="<%=path %><!--
/dwr/interface/menu.js">
// --></mce:script>
<mce:script type="text/javascript" src="<%=path %><!--
/dwr/engine.js">
// --></mce:script>
<mce:script type="text/javascript" src="<%=path %><!--
/dwr/util.js">
// --></mce:script>

这些必须加上而且路径要是这样不能变：/dwr/interface/ 。而menu.js中的menu下面会讲到。是你要调用javabean时js的代表了。当然如果你jsp页面要用到它去调用javabean方法就写，不用它可以不写的（当然你既然用dwr那肯定是最少要使用一个了。如果要用到好多这样的就要把他们都写出来）而其他的就照抄就行....

3.还看jsp页面：

<select  id="flabel1"  name="tcardGreetings.flabel1" onchange="queryflabel2()">
<s:iterator value="tshareTreeModel" id="id">
<s:iterator value="#id">
<s:if test="ftitle==flabel1Title">
<option value="${fid }"    selected="selected">${ftitle } </option>
</s:if>
<s:else>
<option value="${fid }" >${ftitle } </option>
</s:else>
</s:iterator>
</s:iterator>
</select>

<select id="flabel2" name="tcardGreetings.flabel2" >
</select>

该页面是使用struts2标签循环遍历option。flabel1数据先通过actionsupport读取出来。而flabel2则需要通过选择flabel1读取相应的数据来。实现的方法是通过dwr来使用js调用javabean。当然事先要导入dwr.jar包，然后在web-inf下面加入dwr.xml配置。

4.看具体配置：

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd">
<dwr>
<allow>
<create creator="spring" javascript="menu">
<param name="beanName" value="tCardGreetingsDwr" />
</create>
<convert converter="bean" match="com.hxw.card.entity.TshareTree" />

</allow>

</dwr>

因为本人是使用ssh2框架，所以dwr要调用的类也直接使用pring的管理。create标签中creator值和param中name值不能改变，javascript的值就是你要通过js来引用javabean的对象。value值tCardGreetingsDwr是你sping配置文件中配置的bean。convert标签中converter的值也不能变，要修改的就是match就可以了。该配置是控制器的意思，就是你在用js调用javabean中属性值的那个javabean。比如你要通过js取出属性M，而M是A类的属性，你就要将A类放在控制器里面了，否则会报错提示没有A类的converter。

pring的bean：

<bean id="tCardGreetingsDwr" class="com.hxw.dwr.TCardGreetingsDwr">
<property name="sessionFactory">
<ref bean="sessionFactory" />
</property>
</bean>

TCardGreetingsDwr类（TshareTree不用说也知道吧，放在entity包内呵呵...）：

public class TCardGreetingsDwr extends HibernateDaoSupport {

@SuppressWarnings("unchecked")
public List  send(int parentId){
List list = new ArrayList();
Session session = this.getSession();
list = session.createQuery("select t from TshareTree t where fParentID = ? order by fOrder").setParameter(0, parentId).list();
if(session != null){
if(session.isOpen())
session.close();
}
return list;
}
}

记得关闭session哦！，里面方法要有返回值的，要返回给js的。

这些弄好了就可以整js了。

<mce:script type="text/javascript"><!--
function queryflabel2()
{
var flabel1Id = $("flabel1").value;
if(flabel1Id == 0)  //如果value值为0，也就是没有数据了
{
${"flabel2"}.options.length=0;
}
else
{
menu.send(flabel1Id,flabel2Callback);
}
}
function flabel2Callback(flabel2s)
{
DWRUtil.removeAllOptions("flabel2");
for(var i=0;i< flabel2s.length;i ++){
var value = flabel2s[i].fid;
var text = flabel2s[i].ftitle;
var option = new Option(text, value);
try{
$("flabel2").add(option);
}catch(e){
}
}
}
// --></mce:script>

当我们选择label1的时候触发queryflabel2()方法，${"flabel1"} 就是select的那个对象后面加个.value当然就是指它的值了。看到那个menu没有，就相当于TCardGreetingsDwr 类了，而flabel1Id就是要传入的参数，后面那个flabel2Callback方法是下面的方法，但是下面那个方法有参数，其实flabel2Callback就已经把参数传给了flabel2s了，所以flabel2s就是那个send方法的返回值list了。因为list里面存的是TshareTree里面的值，而我们要的就是要获取TshareTree里面的属性。这就为什么要加个converter了。

好了 整个级联操作就这样实现了，好像没漏掉什么吧...

二.用js实现动option动态选择selected状态

在刚才配置的基础上实现label1的动态选择,上面的jsp代码已经把这功能实现了.在这里只是说明下flabel1Title是通过ActionSupport传递过来的值,而ftitle则是通过menu调用javabean传递过来的属性.只要判断这两个值相等就给selected就行.而label2则不能用这种方法,因为label2的option那些控件都是通过js代码生成的,也就是页面里面就只有:

<select id="flabel2" name="tcardGreetings.flabel2" ></select>这样代码了。所以上述方法行不通。因为label2的所有值要通过label1做出选择，也就意味着要先获取label2的所有值才能去判断是否等于指定值。而获取label2所有值就在flabel2Callback方法里面，而直接调用这个方法也肯定不行，因为要传递一个参数过去。所以我想到的就是onload方法，在body里面添加：onload="queryflabel2()" ，这样就实现了打开页面就可以直接读取label2的值而不用要通过label1去读取了，接下来就是实现动态selected了。在jsp页面添加一个hidden隐藏域：

<input type="hidden" id="flabel2Title" value="${flabel2Title }" /> value值就是要传给label2的selected状态的值。也是由ActionSupport传递过来。然后要修改的就是flabel2Callback方法了。

修改后的js：

function flabel2Callback(flabel2s)
{
DWRUtil.removeAllOptions("flabel2");
var flabel2Title = $('flabel2Title').value;
for(var i=0;i< flabel2s.length;i ++){
var value = flabel2s[i].fid;
var text = flabel2s[i].ftitle;
var option = new Option(text, value);
try{
$("flabel2").add(option);
if(flabel2Title == text)
{
option.selected = true;
}
}catch(e){
}
}
}

就这样打开页面就能直接显示要显示的数据了。这样的方法用于修改数据的页面很有效果的。