一个用脚本实现联动下拉列表的问题
我的代码如下,使用起来第二级菜单并不跟着动,请大家帮忙修改:
var id=new Array( " "
<logic:notEmpty name= "type "> //type是个list的第二级数据
<logic:iterate id= "ty " name= "type ">
, " <bean:write name= "ty " property= "personaltypeCategoryId "/> " // id
</logic:iterate>
</logic:notEmpty>
);
var title=new Array( " "
<logic:notEmpty name= "type ">
<logic:iterate id= "ty " name= "type ">
, " <bean:write name= "ty " property= "personaltypeTitle "/> " // title
</logic:iterate>
</logic:notEmpty>
);
function onsel(){
var mainid= " "+myform.personalCategoryId.value;
var psel=myform.personaltypeId.options;
for(i=psel.length-1;i> 0;i--){
myform.personaltypeId.remove(i);
}
if(mainid== '0 ')
return;
for(j=1;j <id.length;j++){
var tl=id[j].length-2;
var tst=id[j].substring(0,tl);
if(tst==mainid){
opt=document.createElement ( "option ");
opt.value=id[j];
opt.text=title[j];
myform.personaltypeId.add(opt);
}
}
}
</script>
</head>
<body>
<form action= "/cocozoo/addGroup.do?method=addGroupBasic " method= "POST "
name= "myform " onsubmit= "return checkvalidate(); ">
<table>
<tr>
<td>
组名
</td>
<td>
<input type= "text " name= "name " />
</td>
</tr>
<tr>
<td>
描述
</td>
<td>
<input type= "text " name= "description " />
</td>
</tr>
<tr>
<td>
分类
</td>
<td>
<select name= "personalCategoryId " onchange= "onsel(); ">
<logic:notEmpty name= "category ">
<logic:iterate id= "ca " name= "category ">
<option
value= " <bean:write name= 'ca ' property= 'personalCategoryId '/> ">
<bean:write name= "ca " property= "personalCategoryTitle " />
</option>
</logic:iterate>
</logic:notEmpty>
</select>
<select name= "personaltypeId ">
<logic:notEmpty name= "type ">
<logic:iterate id= "ty " name= "type ">
<option
value= " <bean:write name= 'ty ' property= 'personaltypeId '/> ">
<bean:write name= "ty " property= "personaltypeTitle " />
</option>
</logic:iterate>
</logic:notEmpty>
</select>
</td>
</tr>
[解决办法]
你把你最后用户浏览到的页面HTML发过来看一下吧
[解决办法]
LZ好强,第一次看到在JS里用Struts标签
[解决办法]
我有一个示例代码,就是联动的实现。
[解决办法]
<script>
var id=new Array( " "
//type是个list的第二级数据
, "1 " // id
, "1 " // id
, "2 " // id
, "2 " // id
, "2 " // id
, "3 " // id
, "3 " // id
, "3 " // id
, "1 " // id
);
var title=new Array( " "
, "消费者 " // title
, "雇用&工作 " // title
, "活跃 " // title
, "年龄 " // title
, "美 " // title
, "书,文学 " // title
, "明星 " // title
, "动画 " // title
, "公司 " // title
);
function onsel(){
var mainid= " "+myform.personalCategoryId.value;
var psel=myform.personaltypeId.options;
for(i=psel.length;i> 0;i--){
myform.personaltypeId.remove(i);
}
if(mainid== '0 ')
return;
var sel = document.getElementById( 'personaltypeId ').options;
for(j=1;j <id.length;j++){
// var tl=id[j].length-2;
// var tst=id[j].substring(0,tl);
if(id[j]==mainid){
// opt=document.createElement ( "option ");
// opt.value=id[j];
// opt.text=title[j];
var inserto = new Option(id[j],title[j]);
/*sel[0].insertAdjacentElement( 'afterEnd ', inserto);
//下面这步可以优化;insertAdjacentElement并未完全执行;
for (var i=0; i <sel.length ; i++)
{
if (sel[i].value == id[j])
{sel[i].text =title[j];}
}
*/
sel[sel.length]=new Option(title[j],id[j]);
}
}
return true;
}
</script>
<body>
<form action= "/cocozoo/addGroup.do?method=addGroupBasic " method= "POST "
name= "myform " onsubmit= "return checkvalidate(); ">
<table>
<tr>
<td>
组名
</td>
<td>
<input type= "text " name= "name " />
</td>
</tr>
<tr>
<td>
描述
</td>
<td>
<input type= "text " name= "description " />
</td>
</tr>
<tr>
<td>
分类
</td>
<td>
<select name= "personalCategoryId " onchange= "onsel(); ">
<option> 请选择
</option>
<option
value= "2 ">
共同的兴趣
</option>
<option
value= "3 ">
娱乐&艺术
</option>
<option
value= "4 ">
地理学
</option>
<option
value= "5 ">
因特网&技术
</option>
<option
value= "6 ">
只为了娱乐
</option>
<option
value= "7 ">
音乐
</option>
<option
value= "8 ">
组织
</option>
<option
value= "9 ">
运动&休闲
</option>
<option
value= "10 ">
学生
</option>
<option
value= "1 ">
商业
</option>
</select>
<select name= "personaltypeId ">
<option> 请选择
</option>
<option
value= "2 ">
消费者
</option>
<option
value= "3 ">
雇用&工作
</option>
<option
value= "4 ">
活跃
</option>
<option
value= "5 ">
年龄
</option>
<option
value= "6 ">
美
</option>
<option
value= "7 ">
书,文学
</option>
<option
value= "8 ">
明星
</option>
<option
value= "9 ">
动画
</option>
<option
value= "1 ">
公司
</option>
</select>
</td>