JQuery——级联下拉框

最新推荐文章于 2022-11-15 10:26:50 发布
VIP文章 最新推荐文章于 2022-11-15 10:26:50 发布
阅读量4k 收藏 3
点赞数 1
分类专栏： ♫ IT之路 ------【JavaScript】 文章标签： jquery 级联下拉框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiao714041/article/details/50544858
版权


    最近看JQuery视频，跟着实现了几个例子，整个过程中感觉不只是学到了新知识，更重新巩固了之前学习的内容，收获着实不小，今天小编敲的级联下拉框效果的视频，很喜欢这个效果，也把学习成果记录下来。


    效果实现过程

    1.chainselect.html部分

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>JQuery实例-级联下拉框效果</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link type="text/css" rel="stylesheet" href="css/chainselect.css" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/chainselect.js"></script>
	</head>
	<body>
		<div class="loading">
			<p><img src="images/data-loading.gif" alt="数据装载中" /></p>
			<p>数据装载中......</p>            <!--<p></p>中显示的是一行的内容，只要在去后面就换行-->
		</div>
		<div class="car">
			<span class="carname">
				汽车厂商:
				<select>
					<option value="" selected="selected">请选择汽车厂商</option>    <!--文本框中默认显示内容-->
					<option value="BMW&
最低0.47元/天 解锁文章
王萌萌萌
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 27
    评论
专栏目录
jQuery实战5:级联下拉框效果
张翠山的博客
02-01 1982
今天来完成jQuery实战的级联下拉框的效果。效果功能如下： 页面默认只提供汽车厂商，当选择了具体的某品牌汽车，汽车类型下拉框就会动态的显示出来，选择对应的类型，然后出来该汽车类型对应的轮胎类型下拉框显示出来，选中轮胎类型，页面的正中间会显示出汽车的图片。
JQuery实战第五讲：级联下拉框效果
07-16
JQuery实战第五讲：级联下拉框效果,如果用在《MVC中更加合适
jQuery实例——jQuery实现联动下拉列表查询框
weixin_34342578的博客
04-08 128
在查询与列表显示的时候经常用到联动列表显示，比如一级选项是国家，二级选项是省，三级是市，这样的联动是联系的实时导出的，比如你不可能选择了四川省却在三级联动栏中出现济南市，这样的联动实现方法如下： 效果图示： 实现源代码： &lt;!DOCTaYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3....
jquery级联下拉框插件
u010132749的博客
05-07 805
;(function($) { $.fn.cascade = function(options) { var defaults = { createOptions: function(parentId){ var rets = []; rets.push('<opt...
cascade down_基于jquery的无限级联下拉框js插件
weixin_39679061的博客
12-20 286
灵活性方面考虑了比较多的方面，提供了几个重要的配置方便在各类环境下使用，欢迎各位童鞋使用，源码完全开放。开发这个插件的缘于前段时间维护一个4级级联下拉框被里面200行代码及复杂的结构和bug所郁闷(之所以这么多代码是因为该级联下拉框有时只出现2个或3个)，想到这类的需求其实经常都能遇到，jquery里没有这样比较好的插件，索性自己开发个。源代码并不复杂，稍微复杂的地方在第二个插件使用了缓存，造成理...
JQuery实现级联下拉框效果实例讲解
11-22
用JQuery和select来实现汽车厂商和汽车类型的联动，参考过程如下 效果图：   逻辑分析图： html代码： <!DOCTYPE ...
jQuery实现级联下拉框实战（5）
10-20
主要为大家详细介绍了jQuery实现级联下拉框的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
java AJAX实现级联下拉框
10-30
AJAX实现级联下拉框 需要的JAVA类,大家可以学习下
Vue.js 2.0中select级联下拉框实例
10-20
在网上搜索了Vuejs2.0 动态级联select许久未果，决定自己总结一下自己的经验，有关select在Vue.js 2.0版本中的应用，需要的朋友可以参考下
jquery实现四级级联下拉列表
你也想起舞吗的博客
12-10 530
开发环境 jdk 1.7 tomcat7 jquery-1.10 数据结构为单表通过parentid架构数据子父级关系 实现过程 通过ajax异步获取下拉列表的数据 intiSelect: function(parentCode){ var result; $.ajax({ url: _path, data: {"parentCode": parentCode}, type: "post", dataType: "json",
jquery级联下拉插件
weixin_30788619的博客
10-27 218
太久没有写博客了，废话就不多说，直接上干货 /* * 基於jquery級聯選擇 * target: 下一級的jquery選擇器 * urlOrData: ajax請求的url或用於篩選的Data * options: 配置 */ (function($) { var defaultOptions = { after: null, ...
Jquery cxSelect多级联动下拉组件的使用
qq_42682745的博客
03-30 2909
Jquery cxSelect多级联动下拉组件的使用 虽然，现在的项目大都不直接使用jquery进行开发了。但是身为后端的我依然遇到了，单体项目，themeleaf模板全栈开发 下面记录一下如何使用（文档这些对我们这些后端来说不是很友好） 首先页面中要引入它的js（我这里是themeleaf） <th:block th:include="include :: jquery-cxselect-js" /> js直接： <script src="jquery.js"></sc
jquery 级联下拉框实例代码
WUHAILIWUHAILI4792的专栏
05-23 607
本文章主要讲关于jquery 级联下拉框使用方法，与在使用过程中出来问题了，下面我们来看看关于jquery 级联下拉框教程吧。 本文章主要讲关于jquery 级联下拉框使用方法，与在使用过程中出来问题了，下面我们来看看关于jquery 级联下拉框教程吧。 jquery 级联下拉框实例代码 $('#select1').change(function (){
JQuery实战：级联下拉框
qq31748029910000的专栏
01-16 814
<br />html：<br /><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>JQuery实例-级联下拉框效果</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link type
jquery级联下拉框
jethai的博客
08-28 727
$(document).ready(function(){     //找到三个下拉框     var carnameSelect = $(".carname").children("select");     var cartypeSelect = $(".cartype").children("select");     var wheeltypeSelect = $(".wheeltype"
【JQuery】使用JQuery实现城市两级或三级联动（下拉菜单）
每一名出色的架构师，必定是一位优秀程序员
03-07 4936
本文只要是通过使用JQuery实现城市（省、市、县）两级或三级联动，并使用下拉菜单展现。主要的代码如下： 1、在Controller中的代码： @RequestMapping(value="/tourAreaAdd.htm") public String toTourAreaAdd(HttpServletRequest request, Integer shoppingTourRulesId
Jquery实现二级下拉选择框
weixin_50813407的博客
11-15 740
【代码】Jquery实现二级下拉选择框。
php级联下拉框
最新发布
05-27
以下是一个基于 PHP 技术实现的级联下拉框的示例代码，其中包含三个下拉框。 HTML 代码： ```html <select id="category1" onchange="getCategory2()"> <option value="">请选择分类1</option> <option value="1">分类1-1</option> <option value="2">分类1-2</option> <option value="3">分类1-3</option> </select> <select id="category2" onchange="getCategory3()"> <option value="">请选择分类2</option> </select> <select id="category3"> <option value="">请选择分类3</option> </select> ``` JavaScript 代码： ```javascript function getCategory2() { var category1 = document.getElementById("category1").value; if (category1 != '') { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var category2 = document.getElementById("category2"); category2.innerHTML = "<option value=''>请选择分类2</option>" + xhr.responseText; document.getElementById("category3").innerHTML = "<option value=''>请选择分类3</option>"; } }; xhr.open("GET", "getCategory2.php?category1=" + category1, true); xhr.send(); } else { document.getElementById("category2").innerHTML = "<option value=''>请选择分类2</option>"; document.getElementById("category3").innerHTML = "<option value=''>请选择分类3</option>"; } } function getCategory3() { var category2 = document.getElementById("category2").value; if (category2 != '') { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var category3 = document.getElementById("category3"); category3.innerHTML = "<option value=''>请选择分类3</option>" + xhr.responseText; } }; xhr.open("GET", "getCategory3.php?category2=" + category2, true); xhr.send(); } else { document.getElementById("category3").innerHTML = "<option value=''>请选择分类3</option>"; } } ``` PHP 代码（getCategory2.php）： ```php <?php $category1 = $_GET["category1"]; if ($category1 == "1") { echo "<option value='1-1'>分类1-1-1</option><option value='1-2'>分类1-1-2</option>"; } else if ($category1 == "2") { echo "<option value='2-1'>分类1-2-1</option><option value='2-2'>分类1-2-2</option>"; } else if ($category1 == "3") { echo "<option value='3-1'>分类1-3-1</option><option value='3-2'>分类1-3-2</option>"; } ?> ``` PHP 代码（getCategory3.php）： ```php <?php $category2 = $_GET["category2"]; if ($category2 == "1-1") { echo "<option value='1-1-1'>分类1-1-1-1</option><option value='1-1-2'>分类1-1-1-2</option>"; } else if ($category2 == "1-2") { echo "<option value='1-2-1'>分类1-1-2-1</option><option value='1-2-2'>分类1-1-2-2</option>"; } else if ($category2 == "2-1") { echo "<option value='2-1-1'>分类1-2-1-1</option><option value='2-1-2'>分类1-2-1-2</option>"; } else if ($category2 == "2-2") { echo "<option value='2-2-1'>分类1-2-2-1</option><option value='2-2-2'>分类1-2-2-2</option>"; } else if ($category2 == "3-1") { echo "<option value='3-1-1'>分类1-3-1-1</option><option value='3-1-2'>分类1-3-1-2</option>"; } else if ($category2 == "3-2") { echo "<option value='3-2-1'>分类1-3-2-1</option><option value='3-2-2'>分类1-3-2-2</option>"; } ?> ``` 在这个示例中，我们使用了三个下拉框，其中第一个下拉框的选项会影响第二个下拉框的选项，第二个下拉框的选项则会影响第三个下拉框的选项。在选择第一个下拉框的选项时，会通过 PHP 脚本获取第二个下拉框的选项数据，并更新第二个下拉框的选项。在选择第二个下拉框的选项时，会通过 PHP 脚本获取第三个下拉框的选项数据，并更新第三个下拉框的选项。希望这个示例对你有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 27
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值