jquery如何动态产生二级联动，就是点击添加按钮后产生一个二级联动

JavaScript018

jquery如何动态产生二级联动，就是点击添加按钮后产生一个二级联动,第1张

二级联动:

<script>

      //点击按钮生成一级联动

   $("button").on("click",function(){

       var oneSelect = "<select name='oneSelect'></select>"

       $("body").append(oneSelect)

   })

   //这里说明下，英文二级联动是根据一级联动来的，逻辑代码看你自己了，因为

   //一级联动是js动态生成的，再绑定事件涉及特殊方法live,而live这个方法1.8.3

   //jquery版本以后是废弃的，所以要使用

   //$("select[name=oneSelect]").on("change","父级节点",fucntion(){})

   //根据你的一级联动以及需求选择触发二级联动

   $("select[name=oneSelect]").live("change",function(){

       var twoSelect = "<select name='twoSelect'></select>"

       $("body").append(twoSelect)

   })

</script>

具体代码如下：

<html>

<head>

<title>简单的Select联动菜单代码</title>

</head>

<body>

<FORM name="F1">

<SELECT NAME="select1" onChange="set_list(this.options.selectedIndex)">

<OPTION SELECTED>流行音乐</OPTION>

<OPTION>网上书籍</OPTION>

<OPTION>软件下载</OPTION>

</SELECT>

<SELECT NAME="select2" >

<OPTION SELECTED>请选网站</OPTION>

</SELECT>

<SCRIPT LANGUAGE="JavaScript">

var l=document.F1.select1.options.length

//取得第一下拉菜单的选项数目

var group=new Array(l)

//根据这个数目创建数组

for (i=0i<li++)

//上一个数组的每一个元素也是数组

group[i]=new Array()

//接下来创建选项，为第二下拉菜单定义内容

group[0][0]=new Option("CNTV","http://www.cntv.cn")

group[0][1]=new Option("音乐天堂","#")

group[0][2]=new Option("搜狗音乐","http://mp3.sogou.com/")

group[1][0]=new Option("网页特效","/jscss")

group[1][1]=new Option("白鹿书院","http://www.readlink.net")

group[2][0]=new Option("华军软件园","http://www.newhua.com")

group[2][1]=new Option("搜狐下载 ","http://it.sohu.com/download/")

group[2][2]=new Option("中国下载","http://www.download.com.cn")

var selobj=document.F1.select2//设定需要动态改变的对象是第二下拉菜单

function set_list(x) //x表示第一菜单被选定的内容

{

for (m=selobj.options.length-1m>0m--) //先清除第二菜单的选项

selobj.options[m]=null

for (i=0i<group[x].lengthi++){

//根据第一菜单的选定序号，丛控件数组中提取菜单选项放进第二菜单

selobj.options[i]=group[x][i]

//这里也可以创建新的对象，例如：selobj.options[i]=new Option(group[x][i].text,group[x][i].value)

}

selobj.options[0].selected=true

//选定第0号选项

}

function go(){

//这个函数用来将窗口导航到指定的URL

location=selobj.options[selobj.selectedIndex].value

}

</SCRIPT>

</FORM>

<p><INPUT TYPE="BUTTON" NAME="Button" VALUE="go" onclick="go()" style="background-color: #FFFFFFfloat: leftfont-family: Arial Blackfont-size: 10ptfont-weight: boldtext-decoration: blinkcolor: #000000font-style: italicborder-style: solidborder-width: 1"></p>

<p>　</p>

</body>

</html>