三级联动下拉框,数据从数据库中存,怎么实现?
有人说用ajax,
或js都行.
请讲讲思路,和实例.
[解决办法]
<html>
<head>
<script language=javascript>
var arr= "浙江|江苏|安徽|江西 ";
var arr0 = "杭州|宁波|温州|绍兴 "; //这些数据可以从数据库中取得
var arr1 = "南京|苏州|无锡|常州 ";
var arr2 = "合肥|翕县|黄山|祁门 ";
var arr3 = "南昌|九江|赣州|上饶 ";
var arr00 = "杭州A区|杭州B区 ";
var arr01 = "宁波A区|宁波B区 ";
var arr02 = "温州A区|温州B区 ";
var arr03 = "绍兴A区|绍兴B区 ";
var arr10 = "南京A区|南京B区 ";
var arr11 = "苏州A区|苏州B区 ";
var arr12 = "无锡A区|无锡B区 ";
var arr13 = "常州A区|常州B区 ";
var arr20 = "合肥A区|合肥B区 ";
var arr21 = "翕县A区|翕县B区 ";
var arr22 = "黄山A区|黄山B区 ";
var arr23 = "祁门A区|祁门B区 ";
var arr30 = "南昌A区|南昌B区 ";
var arr31 = "九江A区|九江B区 ";
var arr32 = "赣州A区|赣州B区 ";
var arr33 = "上饶A区|上饶B区 ";
//alert(eval( "arr "+2+1));
function AddOptions(dltObj,arrObj)
{
dltObj.innerHTML= " ";
var arrLocation=arrObj.split( "| ");
for(var i=0;i <arrLocation.length;i++){
var opt=document.createElement( "OPTION ");
dltObj.add(opt);
opt.value=i;
opt.text=arrLocation[i];
}
}
function init(){
AddOptions(dltProvince,eval( 'arr '));
AddOptions(dltCity,eval( 'arr '+dltProvince.selectedIndex));
AddOptions(dltArea,eval( 'arr '+dltProvince.selectedIndex+dltCity.selectedIndex));
}
</script>
</head>
<body onLoad= "init(); ">
<table width= "300 " cellpading= "0 " cellspacing= "0 " border= "0 ">
<tr>
<td width= "100 "> <select id= "dltProvince " onchange= "AddOptions(dltCity,eval( 'arr '+dltProvince.selectedIndex));AddOptions(dltArea,eval( 'arr '+dltProvince.selectedIndex+dltCity.selectedIndex)); " style= "width:100% "> </select>
</td>
<td width= "100 "> <select id= "dltCity " onchange= "AddOptions(dltArea,eval( 'arr '+dltProvince.selectedIndex+dltCity.selectedIndex)); " style= "width:100% "> </select>
</td>
<td width= "100 "> <select id= "dltArea " style= "width:100% "> </select>
</td>
</tr>
</table>
</body>
</html>
[解决办法]
//=================公司类方法===================//
public String getDrop(String compid,String dataid) throws Exception{
if(str.IsEmpty(dataid) )
dataid= "AAA ";
Compid com[]=this.readAll(compid,dataid);
StringBuffer bf = new StringBuffer();
if(com.length > 0){
for(int i=0;i <com.length ;i++){
if(dataid.equals(com[i].getBh()) )
bf.append( " <option value= " + com[i].getID() + " selected > " + com[i].getName() + " </option> ") ;
else
bf.append( " <option value= " + com[i].getID() + "> " + com[i].getName() + " </option> ") ;
}
}
return bf.toString();
}
//=================部门类方法同上===================//
//====================页面调用=====================//
Compid com = new Compid();
Deptid dep = new Deptid();
Deptid [] depAll=bm.readAll( " ", " ");
<select name= "deptid " style= "width:120px ">
<option value= " "> 所有公司
<%=com.getDrop(compid,deptid)%>
</select>
<select name= "deptid " style= "width:120px ">
<option value= " "> 所有部门
<%=dep.getDrop(compid,deptid)%>
</select>
<script language=javascript>
var bm= new Array();
<%if(depAll.length> 0){
for(int i=0;i <depAll.length;i++){%>
bm[ <%=i%> ] = new Array( " <%=depAll[i].getCom()%> ", " <%=depAll[i].getID()%> ", " <%=depAll[i].getName()%> ");
<%}}%>
function setBm(){
document.form_com_dep.deptid.length = 0;
document.form_com_dep.deptid.options[document.form_com_dep.deptid.length] = new Option( "所有部门 ", " ");
var comp = document.form_com_dep.compid.value ;
var i=0;
for (i=0;i < <%=depAll.length%> ; i++) {
if (bm[i][0] == comp ) {
document.form_com_dep.deptid.options[document.form_com_dep.deptid.length] = new Option(bm[i][2], bm[i][1]);
}
}
}
</script>
[解决办法]
下拉，刷新页面，读取数据库内容。
[解决办法]
Ajax实现三级联动下拉框
http://www.blogjava.net/rickhunter/articles/62571.html
[解决办法]
请你先把下面的代码看一下:
<html>
<body>
<form name= "form ">
<select name= "select1 " onChange= "se1(this.options.selectedIndex); ">
<option> 请选择 </option>
<option> aaa </option>
<option> bbb </option>
</select>
<select name= "select2 " onChange= "se2(this.options.selectedIndex); ">
<option> 请选择 </option>
</select>
<select name= "select3 ">
<option> 请选择 </option>
</select>
</form>
<script language= "javascript ">
var groups=document.form.select1.options.length;
var group=new Array(groups);
for(var i=0;i <groups;i++){
group[i]=new Array();
}
for(var i=0;i <groups;i++){
group[i][0]=new Option( "请选择 ", " ");
}
group[1][1]=new Option( "aa1 ", "aa1 ");
group[1][2]=new Option( "aa2 ", "aa2 ");
group[2][1]=new Option( "bb1 ", "bb1 ");
group[2][2]=new Option( "bb2 ", "bb2 ");
var temp=document.form.select2;
function se1(x){
for(var i=temp.options.length-1;i> =0;i--){
temp.options[i]=null;
}
for(var i=0;i <group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value);
}
temp.options[0].selected=true;
se2(0);
}
var send=new Array(groups);
for(i=0;i <groups;i++){
send[i]=new Array(group[i].length);
for(j=0;j <group[i].length;j++){
send[i][j]=new Array();
}
}
for(i=0;i <groups;i++){
for(var j=0;j <group[i].length;j++){
send[i][j][0]=new Option( "请选择 ", " ");
}
}
send[1][1][1]=new Option( "a11 ", "a11 ");
send[1][1][2]=new Option( "a22 ", "a22 ");
send[1][2][1]=new Option( "b11 ", "b11 ");
send[1][2][2]=new Option( "b22 ", "b22 ");
var temps=document.form.select3;
function se2(x){
for(var i=temps.options.length-1;i> =0;i--){
temps.options[i]=null;
}
var first=document.form.select1.options.selectedIndex;
for(var i=0;i <send[first][x].length;i++){
temps.options[i]=new Option(send[first][x][i].text,send[first][x][i].value);
}
temps.options[0].selected=true;
}
</script>
</body>
</html>
[解决办法]
你需要做的是从后台把groups生成
[解决办法]
http://www.blogjava.net/rickhunter/articles/62571.html
我也是照他的,不错
