您的位置:首页 > 其它

【select级联】一种新的方法

2012-07-02 17:56 113 查看
今天学到了另一种级联选择【类似于选择了省就把该省的下一级地区加载出来】操作的方法,以前都是用ajax做的,现在跟着师父又学到了一种方式,留着,以后用得着。(*^__^*) 嘻嘻

其实原理和ajax的一样,返回的是结构化数据。本代码功能实现的是选择用户组时加载出该用户组下的用户

js如下:

var orderDoc = new ActiveXObject("Microsoft.XMLDOM");
orderDoc.async = "false";
function queryUser() {
var k = infoForm.group_id;
orderDoc.load("<%=request.getContextPath()%>/taskAction.do?method=getUserBygroup&group_id="+ infoForm.group_id.value); //这里action查询方法返回到userList.jsp 页面
var items = orderDoc.getElementsByTagName_r("userTag");
alert(items);
if (infoForm.userid.length > 0) {
for (i = infoForm.userid.length - 1; i >= 0; i--) {
infoForm.userid.remove(i);
}
}
document.infoForm.userid.add(document.createElement_x("OPTION"));
var kk = "";
for (i = 0; i < items.length; i++) {
document.infoForm.userid.add(document.createElement_x("OPTION"));
document.infoForm.userid.options[i + 1].value = items.item(i)
.attributes(1).nodeValue;
document.infoForm.userid.options[i + 1].text = items.item(i)
.attributes(0).nodeValue;
kk == document.infoForm.userid.options[i + 1].value
}
}

主要部分jsp:放在form里面,form名称:上面的infoForm
<tr class="tblContentRowTR">

<td align="right" style="width:100" nowrap class="tblItemHeadTD">

<span class="headerSPAN">用户组</span>

</td>

<td width="250">

<select name="group_id" onchange="queryUser();">

<logic:iterate id="group" name="groupList">

<option value="<bean:write name="group" property="userGroupId"/>"><bean:write name="group" property="userGroupName"/>
</option>

</logic:iterate>

</select>

</td>

</tr>

userList.jsp页面

<%@ page language="java" contentType="text/html;charset=UTF-8" import="java.util.*,com.mvtech.yq.app.bean.User"%>
<%@ page import="java.util.List"%>
<%@ page import="java.text.*"%>
<?xml version="1.0" encoding="UTF-8"?>
<root>
<%
List list = (List)request.getAttribute("userList");
if(list==null)list = new ArrayList();
for(int i=0;i<list.size();i++){
User user=(User)list.get(i);
%>
<userTag display="<%=user.getUsrname()%>" value="<%=user.getUsrid()%>" />
<%}%>

</root>

个人觉得不好的一点就是这个需要多写一个结果数据页面,ajax里直接在方法里搞定了。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: