javascrpt實現聯動下拉框(非ajax)

 數據庫

編碼id   id;

編碼名稱    name;

編碼上級id   parentid;

把所有數據引入數組中  以及對應的查詢函數

<script language="javascript">

function loadPage(obj){
   var str;
   var obj1 = frm.ti;
   var obj2 = frm.s;
   var first=frm.first;
   var second=frm.second;
   str = "&ti="+obj1.value+"&s="+obj2.value+"&first="+first.value+"&second="+second.value;
   this.document.location.href="wjMgr.jsp?pages=" + obj.options[obj.selectedIndex].value+str;
}
function loadPage2(){
   var str;
   var obj1 = frm.ti;
   var obj2 = frm.s;
   var first=frm.first;
   var second=frm.second;
   str = "&ti="+obj1.value+"&s="+obj2.value+"&first="+first.value+"&second="+second.value;
   this.document.location.href="wjMgr.jsp?pages=1"+str;
}
function loadPage1(n){
   var str;
   var obj1 = frm.ti;
   var obj2 = frm.s;
   var first=frm.first;
   var second=frm.second;
   str = "&ti="+obj1.value+"&s="+obj2.value+"&first="+first.value+"&second="+second.value;
   this.document.location.href="wjMgr.jsp?pages="+n+str;
}

var typeArray = new Array();
	var tanum = 0;
	<%
	Table tb = new Table();
Vector vc = null;
Hashtable rows = new Hashtable();
String sql = "";


		String t1="";
		int t3=0,t4=0;
		sql = "select id,name,parentid from inweb_downclass ";
		vc = tb.getContent(sql);
		if(vc.size()>0){
			for(int i=0;i<vc.size();i++){
				rows = (Hashtable)vc.get(i);
				t3 = ((Integer)rows.get("id")).intValue();
				t1 = (String)rows.get("name");
				t4 = ((Integer)rows.get("parentid")).intValue();
				%>
					typeArray[<%=i%>]=new Array('<%=t3%>','<%=t1%>','<%=t4%>');
				<%
			}
		}
	%>
	tanum = "<%=vc.size()%>";
</script>

得到默認的三級聯動下拉框的值

 

<%

String ti = Util.getRequestStr(request,"ti","");
int s = Util.getRequestInt(request,"s",0);
int first = Util.getRequestInt(request,"first",0);
int second = Util.getRequestInt(request,"second",0);
  int uid = 0;
 
  int num = 1;
String t = "";
String d = "";
String sname = "";   

if(second!=0){
	sql="select id,name,parentid  from inweb_downclass where id="+second;
	vc=tb.getContent(sql);
	if(vc.size()!=0){
		rows = (Hashtable)vc.get(0);
		first = ((Integer)rows.get("parentid")).intValue();
	}	
}
if(first!=0){
	sql="select id,name,parentid  from inweb_downclass where id="+first;
	vc=tb.getContent(sql);
	if(vc.size()!=0){
		rows = (Hashtable)vc.get(0);
		s = ((Integer)rows.get("parentid")).intValue();
	}	
}
int type=s;
if(second!=0){
	type=second;
}else{
	if(first!=0){
		type=first;
	}
}

%>

 

聯動菜單

	      			<input type="button" class="input" value="新增文件" οnclick="location.href='wjMgr_add.jsp'">
			      			 名稱：<input type="text" class="input" name="ti" size="20" value="<%=ti%>">
			      			類別： <!-- 默認第一層類別的內容 -->
			      			<select name="s" οnchange="chgb(this.options[this.selectedIndex].value);">
			      				<option value=0>----選擇----</option>
			      				<%
			      				sql="select id,name,parentid  from inweb_downclass where id in (60,6,7,74,37)";
			      				vc=tb.getContent(sql);
			      				for(int i=0;i<vc.size();i++){
			      				rows = (Hashtable)vc.get(i);
								  uid = ((Integer)rows.get("id")).intValue();
							      t = (String)rows.get("name");
							  	%>
							  	<option value="<%=uid %>"  <%if(s==uid){%>selected<%}%>  ><%=t %></option>
							  	<%}%>
			      			
			      			</select>
			      			 <!-- 默認第二層類別的內容 -->
			      			<select name="first" οnchange="chgba(this.options[this.selectedIndex].value);">
			      				<option value=0>----選擇----</option>
			      				<%
			      				if(first!=0){
				      				sql="select id,name,parentid  from inweb_downclass where parentid="+s;
				      				vc=tb.getContent(sql);
				      				for(int i=0;i<vc.size();i++){
				      				rows = (Hashtable)vc.get(i);
									  uid = ((Integer)rows.get("id")).intValue();
								      t = (String)rows.get("name");
							  	%>
							  	<option value="<%=uid %>"  <%if(first==uid){%>selected<%}%>  ><%=t %></option>
							  	<%}}%>
			      				
			      			</select>
			      				 <!-- 默認第三層類別的內容 -->
			      			<select name="second">
			      				<option value=0>----選擇----</option>
			      				<%
			      				if(second!=0){
				      				sql="select id,name,parentid  from inweb_downclass where parentid="+first;
				      				vc=tb.getContent(sql);
				      				for(int i=0;i<vc.size();i++){
				      				rows = (Hashtable)vc.get(i);
									  uid = ((Integer)rows.get("id")).intValue();
								      t = (String)rows.get("name");
							  	%>
							  	<option value="<%=uid %>"  <%if(second==uid){%>selected<%}%>  ><%=t %></option>
							  	<%}}%>
			      			</select>			      			
			      			
			      			<input type="button" class="input" value=" 查詢 " οnclick="loadPage2();">

 

聯動觸發js函數

 

<script language="javascript">
	function chgb(s){
	  frm.first.length=0;  //初始化 分類下拉框
	  frm.first.options[0]=new Option('---選擇---','0');
	  for(i=0;i<tanum;i++){
	    if(typeArray[i][2]==s){   //如果是下級分類，加入這個分類
	      frm.first.options[frm.first.length]=new Option(typeArray[i][1],typeArray[i][0]);
	    }
	  }	 
	}

function chgba(s){
	  frm.second.length=0;  //初始化 分類下拉框
	  frm.second.options[0]=new Option('---選擇---','0');
	  for(i=0;i<tanum;i++){
	    if(typeArray[i][2]==s){   //如果是下級分類，加入這個分類
	      frm.second.options[frm.second.length]=new Option(typeArray[i][1],typeArray[i][0]);
	    }
	  }	 
	}
</script>