jQuery如何实现下拉框的二级联动？

给你一个三级联动的，你你参考一下

创新互联是一家专注于做网站、网站建设与策划设计,天门网站建设哪家好?创新互联做网站,专注于网站建设十载,网设计领域的专业建站公司;建站业务涵盖:天门等地区。天门做网站价格咨询:18980820575

script language="JavaScript" type="text/javascript"

function createCode()

{

//数组赋值

var varname = new Array(4);

varname[0] = "请选择";

varname[1] = "红色";

varname[2] = "黄色";

varname[3] = "蓝色";

//下拉框赋值

for(var i=0;i4;i++)

{

document.getElementById('xlk1').options[i] = new Option(varname[i],i);

}

copy();

}

//复制下拉框一给下拉框二

function copy()

{

for(i=0;idocument.getElementById("xlk1").options.length;i++)

{

document.getElementById('xlk2').options[i] = new Option(document.getElementById("xlk1").options[i].text,i)

}

copytwo();

}

//复制下拉框一给下拉框二

function copytwo()

{

for(i=0;idocument.getElementById("xlk2").options.length;i++)

{

document.getElementById('xlk3').options[i] = new Option(document.getElementById("xlk2").options[i].text,i)

}

}

function onChange1()

{

//获取下拉框1的选中项

var strid=document.getElementById("xlk1").value;

//获取选中项的内容

//var strtxt=document.getElementById("xlk1").options[window.document.getElementById("xlk1").selectedIndex].text;

//获取指定ID下拉框的项总数

//var strnub=document.getElementById("xlk1").options.length;

copy();

if(strid != 0)

{

document.getElementById("xlk2").options.remove(strid);

document.getElementById("xlk3").options.remove(strid);

}

document.getElementById("textfield").value=strid+strtxt+strnub;

}

function onChange2()

{

//获取下拉框1的选中项

var strid2=document.getElementById("xlk2").selectedIndex;

//获取选中项的内容

var strtxt2=document.getElementById("xlk2").options[window.document.getElementById("xlk2").selectedIndex].text;

//获取指定ID下拉框的项总数

var strnub2=document.getElementById("xlk2").options.length;

copytwo();

if(strid2 != 0)

{

document.getElementById("xlk3").options.remove(strid2);

}

}

/script

body onLoad="createCode()"

form id="form1" name="form1" method="post" action=""

select name="xlk1" id="xlk1" onChange="onChange1()"/select

select name="xlk2" id="xlk2" onChange="onChange2()"/select

select name="xlk3" id="xlk3"/select

/form

jquery实现漂亮的二级下拉菜单代码

本文实例讲述了jquery实现漂亮的二级下拉菜单代码。分享给大家供大家参考。具体如下：

这里介绍一款基于jquery实现的网站下拉菜单，黑色风格，很漂亮，本菜单需要点击主菜单后的小三角符号才下拉出二级菜单，并不是有些菜单，是鼠标移上主菜单的时候就滑过，至于哪一种，就看个人的喜好了

先来看看运行效果：

在线演示地址如下：

具体代码如下：

!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

""

html

xmlns=""

head

meta

http-equiv="Content-Type"

content="text/html;

charset=gb2312"

titlejQuery二级菜单/title

script

type="text/javascript"

src="jquery-1.6.2.min.js"/script

script

type="text/javascript"

$(document).ready(function(){

$("ul.subnav").parent().append("span/span");

$("ul.topnav

li

span").click(function()

{

$(this).parent().find("ul.subnav").slideDown('fast').show();

$(this).parent().hover(function()

{

},

function(){

$(this).parent().find("ul.subnav").slideUp('slow');

});

}).hover(function()

{

$(this).addClass("subhover");

},

function(){

$(this).removeClass("subhover");

});

});

/script

style

type="text/css"

body

{

margin:

0;

padding:

0;

font:

10px

normal

Arial,

Helvetica,

sans-serif;

background:

#ddd

url(images/body_bg.gif)

repeat-x;

}

.container

{

width:

960px;

margin:

auto;

position:

relative;

}

#header

{

padding-top:

120px;

}

#header

.disclaimer

{

color:

#999;

padding:

100px

7px

0;

text-align:

right;

display:

block;

position:

absolute;

top:

0;

right:

0;

}

#header

.disclaimer

a

{

color:

#ccc;}

ul.topnav

{

list-style:

none;

padding:

20px;

margin:

0;

float:

left;

width:

920px;

background:

#222;

font-size:

1.2em;

background:

url(images/topnav_bg.gif)

repeat-x;

}

ul.topnav

li

{

float:

left;

margin:

0;

padding:

15px

0;

position:

relative;

}

ul.topnav

li

a{

padding:

10px

5px;

color:

#fff;

display:

block;

text-decoration:

none;

float:

left;

}

ul.topnav

li

a:hover{

background:

url(images/topnav_hover.gif)

no-repeat

center

top;

}

ul.topnav

li

span

{

width:

17px;

height:

35px;

float:

left;

background:

url(images/subnav_btn.gif)

no-repeat

center

top;

}

ul.topnav

li

span.subhover

{background-position:

center

bottom;

cursor:

pointer;}

ul.topnav

li

ul.subnav

{

list-style:

none;

position:

absolute;

left:

0;

top:

35px;

background:

#333;

margin:

0;

padding:

0;

display:

none;

float:

left;

width:

170px;

-moz-border-radius-bottomleft:

5px;

-moz-border-radius-bottomright:

5px;

-webkit-border-bottom-left-radius:

5px;

-webkit-border-bottom-right-radius:

5px;

border:

1px

solid

#111;

}

ul.topnav

li

ul.subnav

li{

margin:

0;

padding:

0;

border-top:

1px

solid

#252525;

border-bottom:

1px

solid

#444;

clear:

both;

width:

170px;

}

html

ul.topnav

li

ul.subnav

li

a

{

float:

left;

width:

145px;

background:

#333

url(images/dropdown_linkbg.gif)

no-repeat

10px

center;

padding-left:

20px;

}

html

ul.topnav

li

ul.subnav

li

a:hover

{

background:

#222

url(images/dropdown_linkbg.gif)

no-repeat

10px

center;

}

#header

img

{

margin:

20px

10px;

}

/style

/head

body

div

class="container"

div

id="header"

ul

class="topnav"

lia

href="#"网站首页/a/li

li

a

href="#"网页菜单/a

ul

class="subnav"

lia

href="#"ASP导航/a/li

lia

href="#"JSP导航/a/li

lia

href="#"ASP.net导航/a/li

lia

href="#"PHP导航/a/li

/ul

/li

li

a

href="#"网页特效/a

ul

class="subnav"

lia

href="#"层和菜单/a/li

lia

href="#"鼠标特效/a/li

lia

href="#"表单特效/a/li

lia

href="#"表格特效/a/li

lia

href="#"CSS特效/a/li

lia

href="#"jQuery特效/a/li

/ul

/li

lia

href="#"搜索引擎/a/li

lia

href="#"博客营销/a/li

lia

href="#"联系我们/a/li

/ul

/div

/div

/body

/html

希望本文所述对大家的jquery程序设计有所帮助。

jquery实现下拉二级菜单的问题

你给 li 加一个class 同时也调用.hover 要不然你鼠标离开 一级栏目的时候就不触发 hover事件了 所以就没有2级栏目 了

jquery 二级下拉菜单问题

二级菜单必须要执行两次上面的那个，采用下面的方法就行了

$(function () {

$("ul").each(function () {

var thisJQ = $(this);

thisJQ.hover(function () {

$(this).find("ul").stop(true, true).slideToggle(500);

}, function () {

$(this).find("ul").stop(true, true).slideUp(600)

})

})

})

本文标题：二级下拉jquery,二级下拉框如何设置
链接地址：http://kswjz.com/article/dscoodc.html