jquery三级联动select下拉菜单特效的实现方法和在线实例展示 亲测 原创

文章标签: jquery select 菜单特效 jquery 表单
  • :
  • 03-13 23:46
  • :
  • 137次
  • :
  • 0条
  • 6赞

简介用jquery来实现网页里三级联动下拉菜单的方法和在线实例展示。l

    这一篇站长教大家如何用jquery来实现网页中的三级下拉菜单联动的效果,先来看在线实例展示:

jquery操作下拉框select的各种方法在线实例演示

    下面站长开始一步一步的教大家如何来做这个三级联动效果:

第一步,因为第一级菜单是不动的,所以要把除了第一级菜单外的第二级和第三级菜单放到JS数组里,方便动态读取和调用:

<script language="javascript">
var TypeInfo=new Array();
TypeInfo[0]=new Array("1","4","T11");//父类别ID,本类别ID,本类别名称
TypeInfo[1]=new Array("1","5","T12");
TypeInfo[2]=new Array("1","6","T13");
TypeInfo[3]=new Array("1","7","T14");
TypeInfo[4]=new Array("2","8","T21");
TypeInfo[5]=new Array("2","9","T22");
TypeInfo[6]=new Array("2","10","T23");
TypeInfo[7]=new Array("3","11","T31");
TypeInfo[8]=new Array("3","12","T32");
TypeInfo[9]=new Array("3","13","T33");
TypeInfo[10]=new Array("3","14","T34");
TypeInfo[11]=new Array("4","15","T111");
</script>

上面站长只列出了部分的菜单,大家只用参考上面的格式,从数据库里把菜单的信息读取出来放到JS数组里就行了;

第二步,添加动作函数,就是当下拉框的值改变时,动态的改变下一级下拉框的选项值的函数:

<script language="javascript">
function ShowSType(v,id){
	$("#"+id).find("option").remove();
	for(var i=0;i<TypeInfo.length;i++){
		if(TypeInfo[i][0].toString()==v.toString()){
			$("#"+id).append('<option value="'+TypeInfo[i][1]+'">'+TypeInfo[i][2]+'</option>');
		}
	}	
};
</script>

上面的函数有两个参数,第一个参数是指父级下拉框的选中的值,第二个参考是下一级下拉框的ID;

函数里的第一句,$("#"+id).find("option").remove();意思是先清空下一级下拉框里原有的option的值;然后再开始用for循环从JS数组里筛选出相同父类别ID的选项,然后添加到子下拉框里。

第三步,向下拉框select添加change()事件,就是当下拉框的值改变时要执行的动作函数:

<script language="javascript">
$("#S1").change(function(){
	v=$("#S1 option:selected").val();
	ShowSType(v,"S2");	
	v=$("#S2 option:selected").val();
	ShowSType(v,"S3");
});
$("#S2").change(function(){
	v=$("#S2 option:selected").val();
	ShowSType(v,"S3");	
});	
</script>

因为是三级联系,所以第一个下拉框的值改变时,不仅要改变第二级的值 ,还要改变第三级的值。

第四步,添加刚载入网页时的初始动作,也就是当网页第一次打开时,还没有任何动作时,添加第二级和第三级下拉框select的选项:

<script language="javascript">
$(function(){
	v=$("#S1 option:selected").val();
	ShowSType(v,"S2");	
	v=$("#S2 option:selected").val();
	ShowSType(v,"S3");
</script>

好了,网页里下拉框select三级联系效果要实现起来就是如此简单,如果大家还不明白,可以直接点开在线实例,把里面的代码复制过去,然后修改一下就行了!



您正在找的文章可能是:
热点文章
热点图文
最近更新
  • Copyright © aijquery.cn 爱jQuery-完全免费的jquery交流学习网站
  • 豫ICP备17037455号-1
  • 2018-11-14 20:43:20