<script type="text/javascript">
function selChange(obj){
if (obj.value == "") {
for (var i = 0; i <= $(obj).get(0).options.length - 1; i++) {
var oArray = $(obj).get(0).options[i].value;
if ($(".snt" + oArray)) {
$(".snt" + oArray).remove();
}
}
return false;
}
var str='<select id="sel_1" onchange="selChange(this)">';
str+='<option value="">请选择</option>';
str+='<option value="3">行业新闻</option>';
str+='<option value="4">市场行情</option>';
str+='</select>';
$("#selAll").html(str);
}
</script>
<div style="float:left; margin:20px;">
<select id="sel_1" onchange="selChange(this)">
<option value="">请选择</option>
<option value="1">资讯</option>
<option value="2">动态</option>
</select>
<div id="selAll"></div>
</div>
实现的功能是主菜单显示子菜单功能，上面是需要和后台交互读取数据填充select的，我这里就简单的写了一下
例如：选择主菜单“资讯”则会自动添加一个列表框，这个列表框的项是资讯的子菜单“行业新闻，市场行情等”
当单机子菜单“市场行情”的时候又会出现一个只属于市场行情的子菜单例如“国内行情，国际行情”，可能有1级或2级或更多的子菜单。
当我选择“请选择”项的时候，相对应的子菜单就被移除。
这个怎么实现，我只能实现出现2个列表框，在出现第三个的时候就不知道怎么判断了，求高手指教！
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
var level_1 = [{
txt : '行业新闻' ,
value : 3
},{
txt : '市场行情' ,
value : 4
}] , level_2 = [{
txt : '国内行情' ,
value : 5
},{
txt : '国际行情' ,
value : 6
}];
$('body').delegate('select' , 'change' , function(){
var html = '<select><option value="0">请选择</option>';
var _v = $(this).val();
if(_v==1){
for(var i = 0 ; i < level_1.length ; ++i){
html += '<option value="' + level_1[i].value + '">' + level_1[i].txt + '</option>';
}
html += '</select>';
$(this).after(html);
}else if(_v == '3'){
for(var i = 0 ; i < level_2.length ; ++i){
html += '<option value="' + level_2[i].value + '">' + level_2[i].txt + '</option>';
}
html += '</select>';
$(this).after(html);
}else if(_v == 0){
$(this).nextAll('select').remove();
}
}); });
</script>
</head>
<body>
<select>
<option value="0">请选择</option>
<option value="1">资讯</option>
<option value="2">动态</option>
</select>
</body>
</html>
谢谢指正，已经更改了。直接复制下面代码运行下，看OK不？<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
var levels = {
'1':[{
txt : '行业新闻' ,
value : 3
},{
txt : '市场行情' ,
value : 4
}],
'3':[{
txt : '国内行情' ,
value : 5
},{
txt : '国际行情' ,
value : 6
}]
};
$('body').delegate('select' , 'change' , function(){
var _v = $(this).val();
if($('#select_' + _v).size()!=0){
return;
}
var html = '<select id="select_' + _v + '"><option value="-1">请选择</option>';
if(levels[_v]){
for(var i = 0 ; i < levels[_v].length ; ++i){
html += '<option value="' + levels[_v][i].value + '">' + levels[_v][i].txt + '</option>';
}
html += '</select>';
$(this).after(html);
}else {
$(this).nextAll('select').remove();
}
});
});
</script>
</head>
<body>
<select id="select_0">
<option value="-1">请选择</option>
<option value="1">资讯</option>
<option value="2">动态</option>
</select>
</body>
</html>