亚洲国产成人久久精品app,亚洲国产精品lv,亚洲真人日本在线

ajax級聯菜單實例

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

<html>

<head>

//js代碼1

<body>

<table>

<tr>

<td>

</select>

</td>

<td>

</select>

</td>

<td>

</select>

</td>

<td>

</select>

</td>

</tr>

</table>

</body>

對應的js代碼：
js代碼1：

//本菜單是4級級聯菜單，采用jquery框架來實現

$(document).ready(function(){

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

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

//記錄本級菜單標志

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('返回數據錯誤，請重新登陸');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);

}

});

后臺返回的數據格式：

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

<ajax-response>

<dict>

</dict>

<dict>

</dict>

</response>

</ajax-respnse>

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


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




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

@OverWrite BlogJava

常用鏈接

留言簿(3)

隨筆分類

隨筆檔案

友情鏈接

搜索

最新評論

閱讀排行榜

評論排行榜

評論