@OverWrite BlogJava

BlogJava :: 首頁 :: 新隨筆 :: 聯(lián)系 :: 聚合

:: 管理 ::

128 隨筆 :: 0 文章 :: 29 評論 :: 0 Trackbacks

<

2008年6月

>

日

一

二

三

四

五

六

25

26

27

28

29

30

31

1

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

1

2

3

4

5

常用鏈接

留言簿(3)

隨筆分類

隨筆檔案

友情鏈接

dojo圈子-JAVAEYE
Java開源項目大全

搜索

閱讀排行榜

評論排行榜

ajax級聯(lián)菜單實例

不說廢話了，直接看代碼：
頁面：

<html>

<head>

//js代碼1

<body>

<table>

<tr>

<td>

</select>

</td>

<td>

</select>

</td>

<td>

</select>

</td>

<td>

</select>

</td>

</tr>

</table>

</body>

對應(yīng)的js代碼：
js代碼1：

//本菜單是4級級聯(lián)菜單，采用jquery框架來實現(xiàn)

$(document).ready(function(){

//為所有class為amenu的元素綁定onchange事件

$('.amenu').change(function(){

//記錄本級菜單標(biāo)志

var orgLevel = this.name;

//下級菜單

var nextMenu = $(this).parents().next().children[0];

//ajax動作提交的對象（后臺采用java程序）

var postUrl = 'pubOrgAjax.do';

//如果本菜單是最后一級菜單的話則不做任何動作

if(orgLevel=='taxOffical') return true;

//本級菜單選擇為全部選項，則下級菜單也置為全部

if(this.value == ''){

var firstOption = nextMenu.option[0];

nextMenu.length=0;

nextMenu.options.add(firstOption);

return true;

}

//ajax動作

$.post(postUrl,{orgFlag:orgLevel,orgCode:this.value},function(xml){

var dicts = $('dict',xml);

if(dicts.length<1){alert('返回數(shù)據(jù)錯誤，請重新登陸');return false;}

//清空nextMenu

if(nextMenu.options[0].value == ''){

var firstOption = nextMenu.options[0].text;

nextMenu.length = 0;

nextMenu.options.add(new Option(firstOption,''));

}else{

nextMenu.length = 0;

}

//為清空后的nextMenu填充新值

for(var i=0;i<dicts.length;i++){

var newOption = new Option($('name',dicts[i]).text(),$('code',dicts[i]).text());

nextMenu.options.add(newOption);

}

});

后臺返回的數(shù)據(jù)格式：

<?xml version="1.0" cencodeing="gbk"?>

<ajax-response>

<dict>

</dict>

<dict>

</dict>

</response>

</ajax-respnse>

posted on 2008-06-12 09:44 vesung 閱讀(9852) 評論(5) 編輯收藏所屬分類: Java 、Ajax/html


只有注冊用戶登錄后才能發(fā)表評論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關(guān)文章: HttpClient簡介如何調(diào)整eclipse字體大小你屬于那個版本的程序員？ ajax級聯(lián)菜單實例關(guān)于java遞歸調(diào)用內(nèi)存泄露 Java作用域描述符的區(qū)別 java序列化的控制轉(zhuǎn)摘：Tomcat中配置和使用JNDI DataSource接口，Connection pooling（連接池），分布式事務(wù)，RowSet介紹 JDBC 2.0概述

@OverWrite BlogJava

常用鏈接

留言簿(3)

隨筆分類

隨筆檔案

友情鏈接

搜索

最新評論

閱讀排行榜

評論排行榜

評論