JS二级菜单的问题

gbgaobo5t 2012-11-01 03:46:10

第一个下拉菜单的值，是12，13，19，22，如果我选择12，那么第二个下拉菜单的值就是13，19，22，我继续在第二个下拉菜单选择13，那么第三个下拉菜单值就是19,22，了，请问怎么实现这个特效，谢谢了。

...全文

327 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

gbgaobo5t 2012-11-06

打赏
举报

谢谢您，分给您了

scscms太阳光 2012-11-06

打赏
举报

引用 6 楼 thc1987 的回复:

上面的有问题,稍微改下:

仍有问题，选择完后，重新选择第一个就出问题啦。试试这个吧：

<select name="cat1" id="cat1"></select>
<select name="cat2" id="cat2"></select>
<select name="cat3" id="cat3"></select>
<script type="text/javascript">
 var arr=[12,13,19,22];
 var str=["菜单12","菜单13","菜单19","菜单22"];
 var select1=document.getElementById("cat1");
 var select2=document.getElementById("cat2");
 var select3=document.getElementById("cat3");
 for(var i=0;i<arr.length;i++){
    var item = new Option(str[i],arr[i]);
    select1.options.add(item);
 }
 option(2);
 option(3);
 select1.onchange=function(){
     option(2);
     option(3);
 };
 select2.onchange=function(){
     option(3);
 };
 function option(i){
     var obj=window["select"+(i-1)];
     var opt=obj.options;
     var thi=window["select"+i];
     thi.innerHTML="";
     for(var n=0;n<opt.length;n++){
         if(n!=obj.selectedIndex){
             var item = new Option(opt[n].text,opt[n].value);
             thi.options.add(item);
         }
     }
 }
</script>

猿敲月下码 2012-11-05

打赏
举报

上面的有问题,稍微改下:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript">
// 数组过滤器
if(!Array.prototype.filter) {
	Array.prototype.filter = function(fn,thisObj){
		var scope = thisObj || window;
		var ret = [];
		for(var i=0,len=this.length;i<len;i++) {
			if(!fn.call(scope,this[i],i,this)) {
				continue;
			}
			ret.push(this[i]);
		}
		return ret;
	}
}

// 存放第一个select内容
var arr = [12,13,19,22];

// 程序入口
window.onload = function() {	
	bindSelect('s1',arr);
}

// 绑定select数据
function bindSelect(id,arr) {

	var select = document.getElementById(id);
	select.innerHTML = '';

	appendOption(select,'-请选择-')

	for(var i=0,len=arr.length;i<len;i++){
		var val = arr[i];
		appendOption(select,val,val);
	}
}

// 添加option
function appendOption(select,text,value) {
	var opt = document.createElement('option');
	opt.innerHTML = text;
	if(typeof value !== 'undefined') {
		opt.setAttribute('value',value);
	}
	select.appendChild(opt);
}

function onchangeHandler(target,nextSelectId) {	
	var value = target.value;
	if(value) {
		
		var arr = getOptionsArr(target);
		// 过滤已经有的
		var ret = arr.filter(function(val){
			return val != value;
		});

		// 绑定下一个select的数据
		bindSelect(nextSelectId,ret);
	}
}

function getOptionsArr(select) {
	var opts = select.getElementsByTagName('option');
	
	var ret = [];
	for(var i=0,len=opts.length;i<len;i++) {
		var value = opts[i].getAttribute('value');
		if(value) {
			ret.push(opts[i].getAttribute('value'));
		}		
	}
	
	return ret;
}
</script>
</HEAD>

<BODY>
<select id="s1" onchange="onchangeHandler(this,'s2')"></select>
<select id="s2" onchange="onchangeHandler(this,'s3')"></select>
<select id="s3"></select>
</BODY>
</HTML>

猿敲月下码 2012-11-05

打赏
举报

玩一把.. 应该是这样的需求吧?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript">
// 数组过滤器
if(!Array.prototype.filter) {
	Array.prototype.filter = function(fn,thisObj){
		var scope = thisObj || window;
		var ret = [];
		for(var i=0,len=this.length;i<len;i++) {
			if(!fn.call(scope,this[i],i,this)) {
				continue;
			}
			ret.push(this[i]);
		}
		return ret;
	}
}

// 存放第一个select内容
var arr = [12,13,19,22];

// 程序入口
window.onload = function() {	
	bindSelect('s1',arr);
}

// 绑定select数据
function bindSelect(id,arr) {

	var select = document.getElementById(id);
	select.innerHTML = '';

	appendOption(select,'-请选择-')

	for(var i=0,len=arr.length;i<len;i++){
		var val = arr[i];
		appendOption(select,val,val);
	}
}

// 添加option
function appendOption(select,text,value) {
	var opt = document.createElement('option');
	opt.innerHTML = text;
	if(typeof value !== 'undefined') {
		opt.setAttribute('value',value);
	}
	select.appendChild(opt);
}

function onchangeHandler(target,nextSelectId) {	
	var value = target.value;
	if(value) {
		// 过滤已经有的
		var ret = arr.filter(function(val){
			return val != value;
		});

		// 绑定下一个select的数据
		bindSelect(nextSelectId,ret);
	}
}
</script>
</HEAD>

<BODY>
<select id="s1" onchange="onchangeHandler(this,'s2')"></select>
<select id="s2" onchange="onchangeHandler(this,'s3')"></select>
<select id="s3"></select>
</BODY>
</HTML>

gbgaobo5t 2012-11-05