jquery联动下拉,jquery联动下拉菜单

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

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

成都创新互联是专业的阿合奇网站建设公司，阿合奇接单;提供网站设计制作、成都网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行阿合奇网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

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 select2 联动下拉列表赋值二级下拉列表赋不上值，怎么搞

你是怎么搞的，代码贴出来看看。

二级联动，都是在一级上加一个onchange事件，触发时更新二级就可以了。

selelct id="sel1" onchange="changeData()"/selelct

selelct id="sel2"/selelct

function changeData(){

var v = $("#sel1").val();

$("#sel2").html('option......../option');

}

用jquery实现三级下拉菜单联动时，菜单三无法显示。

class_array是一个二维数组，看你代码的意思。。当第1个下拉菜单

触发change事件时，即

if(v[2]==$("#pard1").val())

$("option

value='"+v[0]+"'"+v[1]+"/option").appendTo($("#pard2"));

这是表示传入的数组v的第三个元素等于第1个下拉菜单的值时，才会将第2个下拉菜单填充。

我看v数组的第三个元素的值有0,1,14，但是又要与第1个下拉菜单的值相等的唯有class_array[0]=new

Array('1','护肤','0');所以，在第1个下拉菜单选择'护肤'才会对第二个下拉菜单有联动效果

jQuery EasyUI Editable DataGrid下拉框联动？

在前面的combobox加个事件onSelect:function(data){}在方法里面

var row = $('#dg').datagrid('getSelected');

var rowIndex = $('#dg').datagrid('getRowIndex',row);//获取行号

var target = $('#dg').datagrid('getEditor', {'index':rowIndex,'field':'联动字段'}).target;

target.combobox('clear'); //清除原来的数据

var url = '获取数据的action带上当前参数'+data.value;

target.combobox('reload', url);//联动下拉列表重载

最好在开始编辑的事件也加一次联动，这只是选择的时候才联动

jQuery制作简洁的多级联动Select下拉框

今天我们要来分享一款很实用的jQuery插件，它是一个基于jQuery多级联动的省市地区Select下拉框，并且值得一提的是，这款联动下拉框是经过自定义美化过的，外观比浏览器自带的要漂亮许多。另外，这个Select下拉框也可以绑定下拉事件，并获取当前选中项的值。

html代码：

复制代码

代码如下:

div

class="wrap"

div

class="nice-select"

name="nice-select"

input

type="text"

value="==选择省份=="

readonly

ul

li

data-value="1"湖北省/li

li

data-value="2"广东省/li

li

data-value="3"湖南省/li

li

data-value="4"四川省/li

/ul

/div

div

class="h20"

/div

div

class="nice-select"

name="nice-select"

input

type="text"

value="==选择城市=="

readonly

ul

li

data-value="1"武汉市/li

li

data-value="2"深圳市/li

li

data-value="3"长沙市/li

li

data-value="4"成都市/li

/ul

/div

div

class="h20"

/div

div

class="nice-select"

name="nice-select"

input

type="text"

value="==选择区县=="

readonly

ul

li

data-value="1"蔡甸区/li

li

data-value="2"南山区/li

li

data-value="3"雨花区/li

li

data-value="4"武侯区/li

/ul

/div

/div

script

type="text/javascript"

src="js/jquery.js"/script

script

$('[name="nice-select"]').click(function

(e)

{

$('[name="nice-select"]').find('ul').hide();

$(this).find('ul').show();

e.stopPropagation();

});

$('[name="nice-select"]

li').hover(function

(e)

{

$(this).toggleClass('on');

e.stopPropagation();

});

$('[name="nice-select"]

li').click(function

(e)

{

var

val

=

$(this).text();

var

dataVal

=

$(this).attr("data-value");

$(this).parents('[name="nice-select"]').find('input').val(val);

$('[name="nice-select"]

ul').hide();

e.stopPropagation();

alert("中文值是："

+

val);

alert("数字值是："

+

dataVal);

//alert($(this).parents('[name="nice-select"]').find('input').val());

});

$(document).click(function

()

{

$('[name="nice-select"]

ul').hide();

});

/script

css代码：

复制代码

代码如下:

body

{

color:

#555;

font-size:

14px;

font-family:

"微软雅黑"

,

"Microsoft

Yahei";

background-color:

#EEE;

}

a

{

color:

#555;

}

a:hover

{

color:

#f00;

}

input

{

font-size:

14px;

font-family:

"微软雅黑"

,

"Microsoft

Yahei";

}

.wrap

{

width:

500px;

margin:

100px

auto;

}

.h20

{

height:

20px;

overflow:

hidden;

clear:

both;

}

.nice-select

{

width:

245px;

padding:

10px;

height:

38px;

border:

1px

solid

#999;

position:

relative;

box-shadow:

5px

#999;

background:

#fff

url(images/a2.jpg)

no-repeat

right

center;

cursor:

pointer;

}

.nice-select

input

{

display:

block;

width:

100%;

height:

38px;

line-height:

38px

\9;

border:

0;

outline:

0;

background:

none;

cursor:

pointer;

}

.nice-select

ul

{

width:

100%;

display:

none;

position:

absolute;

left:

-1px;

top:

38px;

overflow:

hidden;

background-color:

#fff;

max-height:

150px;

overflow-y:

auto;

border:

1px

solid

#999;

border-top:

0;

box-shadow:

3px

5px

#999;

z-index:

9999;

}

.nice-select

ul

li

{

height:

30px;

line-height:

30px;

overflow:

hidden;

padding:

10px;

cursor:

pointer;

}

.nice-select

ul

li.on

{

background-color:

#e0e0e0;

}

代码很简洁，我这里就不多做解释了，小伙伴们自己预览下就知道效果是多麽的简洁大方了，非常实用。

怎样用jquery实现3级联动下拉框

HTML部分如下：

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

""

html

head

title/title

script type="text/javascript" src="jslib/jquery.js"/script

script type="text/javascript" src="jslib/select.js"/script

link rel="stylesheet" type="text/css" href="mycss/select.css"

/head

body

div class="loading"

pimg src="images/data-loading.gif" alt="数据加载中"/p

p 数据加载中.../p

/div

div class="car" 

span class="carname" 汽车厂商:

select

option value="" selected请选择汽车厂商/option

option value="BMW"宝马/option

option value="Audi"奥迪/option

option value="VW"大众/option

/select

img src="images/pfeil.gif" alt="数据"/span

span class="cartype" 汽车类型:

select/select

img src="images/pfeil.gif" alt="数据"/span

span class="wheeltype"轮胎类型:

select/select /span

/div

div class="carimage"

img src="images/img-loading.gif" class="carload"/

img src="" class="carimg"/

/div

/body

/html

CSS部分如下：

.loading{

text-align:center;

visibility:hidden; 

}

p,.car,.carimage{

text-align:center;

}

.cartype,.wheeltype,.car img,.carimage,.carload{

display:none;

}

js部分如下：

$(function(){

//得到三个下拉框

var carnameSelect = $(".carname").children("select");

var cartypeSelect = $(".cartype").children("select");

var wheeltypeSelect = $(".wheeltype").children("select");

//给三个下拉框加下拉框的改变事件

carnameSelect.change(function(){

//1.获取当前汽车厂商下拉框所有选中的值

var carnameValue = $(this).val();

//把wheeltypeSelect隐藏起来，并且把第二个下拉框并列的图片隐藏

wheeltypeSelect.parent().hide();

cartypeSelect.next().hide();

//如果值不为空 则向服务器发送请求

if(carnameValue!=""){

//用post给服务器发送信息

//第一个参数是请求的url 第二个参数是请求发送的数据并且以post发送，第三个参数是回调函数就收返回数据，数据就在函数的参数中

//第四个参数是请求返回的数据格式默认是html

if(!carnameSelect.data(carnameValue)){

$.post("SelectServlet",{keyword:carnameValue,type:"top"},function(data){

if(data.length!=0){

cartypeSelect.html("");

$("option value=''请选择汽车类型/option").appendTo(cartypeSelect);

for(var i=0;idata.length;i++){

$("option value='"+data[i]+"'"+data[i]+"/option").appendTo(cartypeSelect);

}

//追加完成后，需要显示第二个下拉框和第一个下拉框后的图片

cartypeSelect.parent().show();

carnameSelect.next().show();

}else{

//如果是0 说明没有数据要返回。

//第二个下拉框隐藏，第一个下拉框后的图片隐藏。

cartypeSelect.parent().hide();

carnameSelect.next().hide();

}

//把数据缓冲起来，下次从缓冲中去取，取不到的再跟服务器进行交互，取到就直接使用，以此来减轻服务器的压力

carnameSelect.data(carnameValue,data);

},"json");

}else{

var data = carnameSelect.data(carnameValue);

if(data.length!=0){

//遍历这个数组元素

cartypeSelect.html("");

$("option value=''请选择汽车类型/option").appendTo(cartypeSelect);

for(var i=0;idata.length;i++){

//存在一个元素，汽车类型的下拉框就应该多一个元素 所以又一个元素就创建一个option节点，并且追加给汽车类型下拉框

$("option value='"+data[i]+"'"+data[i]+"/option").appendTo(cartypeSelect);

}

//追加完成后，需要显示第二个下拉框和第一个下拉框的图片

cartypeSelect.parent().show();

carnameSelect.next().show();

}else{

//如果是0 说明没有数据要返回。

//第二个下拉框隐藏，第一个下拉框后的图片隐藏。

cartypeSelect.parent().hide();

carnameSelect.next().show();

}

}

}else{

//如果carnameValue为空 也就是说选择的汽车厂商没有，那么第二个下拉框，和第一个下拉框后的图片还得继续隐藏

cartypeSelect.parent().hide();

//获取汽车厂商的下一个兄弟节点

carnameSelect.next().hide();

}

});

cartypeSelect.change(function(){

//1.获取当前汽车类型下拉框所有选中的值

var cartypeValue = $(this).val();

//隐藏汽车图片attr：先清空上次src图片路径避免下一次先显示一次.

$(".carimg").hide().attr("src","");

$(".carimage").hide();

//2.如果值不为空就向服务器发送请求

if(cartypeValue!=""){

if(!cartypeSelect.data(cartypeValue)){

$.post("SelectServlet",{keyword:cartypeValue,type:"sub"},function(data){

//可以获得请求数据进行分析处理   ,将来在Servlet中数据是以字符串数组的方式返回的

//如果返回数据的长度不是0 对数据进行分析

if(data.length!=0){

//遍历此数组元素

wheeltypeSelect.html("");

$("option value=''请选择汽车类型/option").appendTo(wheeltypeSelect);

for(var i=0;idata.length;i++){

//存在一个元素，汽车类型的下拉框就应该多一个元素 所以又一个元素就创建一个option节点，并且追加给汽车类型下拉框

$("option value='"+data[i]+"'"+data[i]+"/option").appendTo(wheeltypeSelect);

}

//追加完成后，需要显示第三个下拉框和第二个下拉框后的图片

wheeltypeSelect.parent().show();

cartypeSelect.next().show();

}else{

//如果是0 说明没有数据要返回。

//第3个下拉框隐藏，第2个下拉框后的图片隐藏。

wheeltypeSelect.parent().hide();

cartypeSelect.next().hide();

}

//把data数据缓冲起来

cartypeSelect.data(cartypeValue,data);

},"json");

}else{

var data = cartypeSelect.data(cartypeValue);

if(data.length!=0){

//遍历这个数组元素

wheeltypeSelect.html("");

$("option value=''请选择汽车类型/option").appendTo(wheeltypeSelect);

for(var i=0;idata.length;i++){

//存在一个元素，汽车类型的下拉框就应该多一个元素 所以又一个元素就创建一个option节点，并且追加给汽车类型下拉框

$("option value='"+data[i]+"'"+data[i]+"/option").appendTo(wheeltypeSelect);

}

//追加完成后，需要显示第三个下拉框和第二个下拉框后的图片

wheeltypeSelect.parent().show();

cartypeSelect.next().show();

//追加完成后，需要显示第三个下拉框和第二个下拉框后的图片

wheeltypeSelect.parent().show();

cartypeSelect.next().show();

}else{

//如果是0 说明没有数据要返回。

//第3个下拉框隐藏，第2个下拉框后的图片隐藏。

wheeltypeSelect.parent().hide();

cartypeSelect.next().hide();

}

}

}else{

wheeltypeSelect.parent().hide();

cartypeSelect.next().hide();

}

});

wheeltypeSelect.change(function(){

//取得选中的车轮类型的值

var wheeltypeValue = $(this).val();

//取得图片的名称

var imagename = carnameSelect.val()+"_"+cartypeSelect.val()+"_"+wheeltypeValue+".jpg";

//$(".carimg").attr("src","images/"+imagename);

//$(".carimage").show();

//js对图片进行预装载

//js对象

$(".carimg").hide();

$(".carimage").show();

$(".carload").show();

var catchimg = new Image();

//如何转换为jquery对象并处理

$(catchimg).attr("src","images/"+imagename).load(function(){

//隐藏loading图片

$(".carload").hide();

//显示汽车图片

$(".carimage").show();

$(".carimg").attr("src","images/"+imagename).show();

});

});

//动画效果

$(".loading").ajaxStart(function(){

$(".loading").css("visibility","visible");

$(this).animate({

opacity:1

},0);

}).ajaxStop(function(){

$(this).animate({

opacity:0

},500);

});

});

//别忘了引用jquery.js