- 浏览: 309880 次
- 性别:
- 来自: 成都
文章分类
- 全部博客 (312)
- 细细品味-Java (104)
- 细细品味-Xml (9)
- 细细品味-Json (6)
- 细细品味-Ajax (2)
- 细细品味-Jdbc (3)
- 细细品味-Ibatis (8)
- 细细品味-Oracle (4)
- 细细品味-Spring (10)
- 细细品味-Struts2 (8)
- 细细品味-Lucene (9)
- 细细品味-Jquery (36)
- 细细品味-Eclipse (6)
- 细细品味-Javascrip (28)
- 细细品味-Hibernate (9)
- 细细品味-WebService (6)
- 细细品味-Javascript API (6)
- 细细品味-ArcGIS Server (6)
- 细细品味-Flex (4)
- 细细品味-Linux (11)
- 细细品味-SVG (16)
- 细细品味-html5 (27)
- 细细品味-Shiro (1)
- 细细品味-Maven (3)
- 细细品味-Mysql (4)
- 细细品味-Tomcat (3)
- 细细品味-Android (0)
- 细细品味-Windows (1)
- 细细品味-Google Guava (21)
- 细细品味-FusionCharts (2)
- 细细品味-算法 (10)
- 细细品味-Dojo框架 (2)
- 细细品味-Http协议 (1)
- 细细品味-地理编码 (14)
- 细细品味-中文乱码 (3)
- 细细品味-数据结构 (2)
- 细细品味-面试题 (1)
- 设计模式 (0)
- 杂谈小记 (3)
- 随笔小记 (4)
- three.js (1)
- 细细品味-云计算&虚拟化 (0)
- 细细品味-架构 (1)
- 细细品味-系统优化 (1)
- 细细品味-hbase (1)
- 细细品味-hadoop (5)
- 细细品味-hive (3)
- 细细品味-flume (1)
- 细细品味-hdfs (2)
- 细细品味-微服务 (1)
- 细细品味-Spring Boot (1)
最新评论
-
final7tifa:
感觉写的挺好
封装JAVA 通过反射 POI导出Excel文件(直接可用 含测试代码) -
漆停停:
...
封装JAVA 通过反射 POI导出Excel文件(直接可用 含测试代码) -
sybell:
很是不错的文章,不过要达到熟练使用,都还在实际项目中使用。
Effective Java学习(并发)之——同步访问共享可变数据
Jquery实现三级联动效果
一、jsp代码
<div class="loding">
<p><img alt="内容加载中......" src="images/4.jpg"></p>
</div>
<div class="car">
<span class="carName">
汽车厂商:
<select>
<option value="" selected="selected">--请选择汽车厂商--</option>
<option value="Bmw">宝马</option>
<option value="Audi">奥迪</option>
<option value="Bzen">奔驰</option>
</select>
<img alt="图片" src="images/5.jpg">
</span>
<span class="cartype">
汽车类型:
<select>
<option value="" selected="selected">--请选择汽车类型--</option>
</select>
<img alt="图片" src="images/5.jpg">
</span>
<span class="carlunTai">
轮胎类型:
<select>
<option value="" selected="selected">--请选择轮胎类型--</option>
</select>
</span>
</div>
<div class="moren"></div>
<div class="carimg">
<img alt="汽车图片" src="images/car.jpg">
</div>
二、css源码
.loding{
width: 500px;
margin-left: auto;
margin-right: auto;
visibility: hidden;
}
.loding p{
text-align: center;
}
.car{
width: 1000px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.carimg{
width: 600px;
margin-left: auto;
margin-right: auto;
}
.cartype,.carlunTai,.carimg,.car img{
display: none;
}
.moren{
height: 50px;
}
三、js源码:
$(document).ready(function(){
//先找到三个下拉框
var carNameSelect = $(".carName").children("select");
var carTypeSelect = $(".cartype").children("select");
var carlunTaiSelect = $(".carlunTai").children("select");
//给三个下拉框添加事件
carNameSelect.change(function(){
//如果点击第一个下拉框首先要把第三个隐藏
carlunTaiSelect.parent().hide();
//alert(5444);
//1,先获取当前下拉框的值
var carNameValue = $(this).val();
alert(typeof carNameValue);
//alert(carNameValue);
//2,判断 如果值不为空,则将下拉框的值传递给服务器
if(carNameValue != ""){
$.post("carVendorAcrion",{
carName:carNameValue
},
function(data){
alert(data);
//2.1接收服务器返回的汽车类型 join类型 返回的是一个js的数组对象
if(data.length != 0){
//每次点击时要把汽车类型下拉框的内容先清空
carTypeSelect.html("");
//添加一个默认的选项放到汽车类型的下拉框里面
$("<option value=''>--请选择汽车类型--</option>").appendTo(carTypeSelect);
//2.2解析汽车类型数据, 填充到汽车类型的下拉框
for(var i=0; i<data.length;i++){
//创建一个option 并填充到汽车类型的下拉框
$("<option value="+data[i]+">"+data[i]+"</option>").appendTo(carTypeSelect);
}
//需要显示第二个下拉框
carTypeSelect.parent().show();
//把第一歌下拉框后面的img图片显示出来
carNameSelect.next().show();
}else{
//2.2 没有任何汽车类型 把汽车类型下拉框隐藏
carTypeSelect.parent().hide();
}
},"json");
}else{
//3 r如果值为空 则将汽车类型的下拉框隐藏 同时也要把第一个下拉框后面的图片隐藏
//找到第汽车类型的下拉框的父节点span并
carTypeSelect.parent().hide();
//找到第一歌下拉框的子节点img 并隐藏
carNameSelect.next().hide();
}
});
carTypeSelect.change(function(){
//alert(5444);
//1,先获取当前下拉框的值
var carTypeValue = $(this).val();
//alert(typeof carTypeValue);
//alert(carNameValue);
//2,判断 如果值不为空,则将下拉框的值传递给服务器
if(carTypeValue != ""){
$.post("carVendorAcrion",{
carName:carTypeValue
},
function(data){
alert(data);
//2.1接收服务器返回的车轮车型 join类型 返回的是一个js的数组对象
if(data.length != 0){
//每次点击时要把车轮类型下拉框的内容先清空
carlunTaiSelect.html("");
//添加一个默认的选项放到汽车类型的下拉框里面
$("<option value=''>--请选择车轮类型--</option>").appendTo(carlunTaiSelect);
//2.2解析车轮类型数据, 填充到车轮类型的下拉框
for(var i=0; i<data.length;i++){
//创建一个option 并填充到汽车类型的下拉框
$("<option value="+data[i]+">"+data[i]+"</option>").appendTo(carlunTaiSelect);
}
//需要显示第三个下拉框
carlunTaiSelect.parent().show();
//把第二歌下拉框后面的img图片显示出来
carlunTaiSelect.next().show();
}else{
//2.2 没有任何车轮类型 把车轮类型下拉框隐藏
carlunTaiSelect.parent().hide();
}
},"json");
}else{
//3 r如果值为空 则将车轮类型的下拉框隐藏 同时也要把第一个下拉框后面的图片隐藏
//找到第车轮类型的下拉框的父节点span并
carlunTaiSelect.parent().hide();
//找到第二歌下拉框的子节点img 并隐藏
carTypeSelect.next().hide();
}
});
carlunTaiSelect.change(function(){
});
});
发表评论
-
jQuery1.9(动画效果)学习之—— .toggle( [duration ] [, complete ] )
2014-04-29 15:36 0描述: 显示或隐藏匹 ... -
jQuery1.9(动画效果)学习之—— .stop( [clearQueue ] [, jumpToEnd ] )
2014-04-29 15:32 0描述: 停止匹配元素 ... -
jQuery1.9(动画效果)学习之—— .slideUp( [duration ] [, complete ] )
2014-04-29 15:28 0描述: 用滑动动画隐藏一个匹配元素。 . ... -
jQuery1.9(动画效果)学习之——.slideToggle( [duration ] [, complete ] )
2014-04-29 15:24 0描述: 用滑动动画显 ... -
jQuery1.9(动画效果)学习之—— .slideDown( [duration ] [, complete ] )
2014-04-29 15:21 0描述: 用滑动动画显示一个匹配元素。 .sli ... -
jQuery1.9(动画效果)学习之—— .show()
2014-04-29 15:16 0.show() 这个方法不接受任何参数。 . ... -
jQuery1.9(动画效果)学习之——.queue()
2014-05-05 14:56 463.queue( [queueName ] ) 描述:显示 ... -
jQuery1.9(动画效果)学习之—— jQuery.fx.off
2014-05-05 14:55 379描述: 全局的禁用所有动画。 jQuery. ... -
jQuery1.9(动画效果)学习之——jQuery.fx.interval
2014-05-05 14:55 431描述: 该动画的频率(以毫秒为单位)。 jQ ... -
jQuery1.9(动画效果)学习之——.hide()
2014-05-05 14:55 429描述: 隐藏匹配的元素。 .hide() ... -
jQuery1.9(动画效果)学习之—— .finish( [queue ] )
2014-05-05 14:55 432描述: 停止当前正在运行的动画,删除所有排队的 ... -
jQuery1.9(动画效果)学习之—— .fadeToggle( [duration ] [, easing ] [, complete ] )
2014-05-04 17:14 432描述: 通过匹配的 ... -
jQuery1.9(动画效果)学习之——.fadeTo( duration, opacity [, complete ] )
2014-05-04 17:13 699描述: 调整匹配元 ... -
jQuery1.9(动画效果)学习之—— .fadeOut( [duration ] [, complete ] )
2014-05-04 17:13 625描述: 通过淡出的方式隐藏匹配元素。 .fa ... -
jQuery1.9(动画效果)学习之—— .fadeIn( [duration ] [, complete ] )
2014-04-29 15:38 486描述: 通过淡入的方式显示匹配元素。 .fa ... -
jQuery1.9(动画效果)学习之——.dequeue( [queueName ] )
2014-04-29 15:38 412描述: 执行匹配元素队列的下一个函数。 . ... -
jQuery1.9(动画效果)学习之—— .delay( duration [, queueName ] )
2014-04-29 15:38 548描述: 设置一个延 ... -
jQuery1.9(动画效果)学习之——.clearQueue( [queueName ] )
2014-04-29 15:37 327.clearQueue( [queueName ] ... -
jQuery1.9(动画效果)学习之—— .animate( properties [, duration ] [, easing ] [, complete
2014-04-29 14:33 1667描述: 根据一组 CSS ... -
jQuery1.9(辅助函数)学习之——.serializeArray();
2014-03-27 11:31 462.serializeArray();返回一个Array ...
相关推荐
jquery 实现省地市县三级联动源码经典例子jquery 实现省地市县三级联动源码经典例子jquery 实现省地市县三级联动源码经典例子jquery 实现省地市县三级联动源码经典例子
jQuery实现的带select下拉选择框美化的省市区三级联动特效源码.zip
jquery div模拟select表单地区选择三级联动美化效果
Jquery通用二维数组无限级联动源码 技术特点:Jquery通用 [二维数组] 无限级联动、赋值联动 功能介绍: 无限级联动、赋值联动 ,.net后台赋值,取值,ShowSelect1.SelectID 取值与赋值 数据源必须为三列二维数组!...
jQuery三级联动菜单选择器代码是一款分类菜单选择器,点击弹出下拉菜单,三级联动选择器,适用于多分类菜单选择代码。
NULL 博文链接:https://huigege.iteye.com/blog/1852954
NULL 博文链接:https://easybest.iteye.com/blog/288255
省市区三级联动,用ajax+jquery实现。方便大家学习工作使用。
Asp.net+jQuery带数据(json)三级联动,异步加载数据,完美实现三级联动,附源码。
应用jquery编写的三级联动菜单源码
技术特点:Jquery通用 [二维数组] 无限级联动、赋值联动 功能介绍: 无限级联动、赋值联动 ,.net后台赋值,取值,ShowSelect1.SelectID 取值与赋值 数据源必须为三列二维数组!包含 id,名称,父级id,[[1, "根级", 0...
主要介绍了jQuery+jsp实现省市县三级联动效果,以完整实例形式分析了jQuery结合jsp读取MySQL数据库操作实现省市县三级联动效果的相关技巧,并附带完整实例源码供读者下载参考,需要的朋友可以参考下
与上一个三级联动不同的是:上一个项目是使用dom技术编写的整个js代码,存在一定的不足与bug,即浏览器不兼容,只在火狐中有成效,IE、opera、google等都不能兼容。。。到底是哪个模块导致的不兼容,本人目前正在...
jQuery三级地区联动选择菜单jquery-1.9.1.js制作,省市区三级联动选择菜单,适合手机WAP网站使用。
淘宝商品发布三级联动菜单基于jquery.1.9.1.min.js制作,点击输入框弹出菜单。
jQuery全国高校三级联动下拉框.zip
因下载三级联动源码无法动态设置默认值,2017年9月27日制作最新省市区三级联动源码,使用jquery+bootstrap,可通过data-province,data-city,data-county属性设置默认值