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
分享题目：jquery联动下拉,jquery联动下拉菜单
文章出自：http://myzitong.com/article/dscpspi.html