jquery多级联动下拉插件chained（附DEMO）

最新推荐文章于 2024-03-26 09:33:33 发布
最新推荐文章于 2024-03-26 09:33:33 发布
阅读量201 收藏
点赞数
分类专栏： js应用 文章标签： xhtml javascript ViewUI 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Chained Select / Pulldown Demo</title>
<meta name="generator" content="fingers" />
<style type="text/css">
#sidebar {
width: 0px;
}

#content {
width: 770px;
}

#button, #button-remote {
display: none;
}

</style>

</head>

<body>
<div id="wrap">
<div id="header">
<p>
<h1>Chained</h1><br />
<small>Chained select plugin for jQuery</small>
<ul id="nav">
<li id="first"><a href="/" class="active">weblog</a></li>
<li><a href="/projects" class="last">projects</a></li>
<!--
<li><a href="/cv" class="last">cv</a></li>
-->
</ul>
</p>
</div>
<div id="content">

<div class="entry">
<h3>jquery.chained.js</h3>
<form>
<select id="mark">
<option value="">--</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
<select id="series">
<option value="">--</option>

<option value="series-1" class="bmw">1 series</option>
<option value="series-3" class="bmw">3 series</option>
<option value="series-5" class="bmw">5 series</option>

<option value="a1" class="audi">A1</option>
<option value="a3" class="audi">A3</option>
<option value="s3" class="audi">S3</option>
</select>
<select id="model">
<option value="">--</option>

<option value="3-doors" class="series-1 bmw">3 doors</option>
<option value="5-doors" class="series-1">5 doors</option>
<option value="coupe" class="series-1 series-3 series-6">Coupe</option>
<option value="cabrio" class="series-1 series-3 series-6">Cabrio</option>
<option value="sedan" class="series-3 series-5 series-7">Sedan</option>
<option value="touring" class="series-3 series-5">Touring</option>
<option value="sedan" class="a1 a3 s3">Sedan</option>
<option value="sportback" class="a3">Sportback</option>
<option value="cabriolet" class="a3">Cabriolet</option>
<option value="avant" class="a1">Avant</option>
<option value="allroad" class="a3">Allroad</option>
<option value="coupe" class="s3">Coupe</option>
</select>

<select id="engine">
<option value="" width="150"></option>
<option value="25-petrol" class="series-3 bmw">2.5 petrol</option>
<option value="30-petrol" class="series-3 a3">3.0 petrol</option>
<option value="30-diesel" class="coupe">3.0 diesel</option>
</select>

</form>

</div>

<div id="sidebar">
</div>

</div>

<div id="footer">
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.chained.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {

/* For jquery.chained.js */
$("#series").chained("#mark");
$("#model").chained("#series,#mark");
$("#engine").chained("#series, #model,#mark");
})

</script>

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-190966-1";
urchinTracker();
</script>

</body>
</html>
 
wuxq0505
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
带搜索框的jQuery下拉框美化插件searchableSelect
JSF的博客
03-15 7241
本文是实用性更新文章： 1.所需引用 这里只需要在head内引入如下的代码：<link href="jquery.searchableSelect.css" rel="stylesheet" type="text/css"> <script src="jquery-1.11.1.min.js"></script> <script src="jquery.searchableSelect.js">
jQuery多级联动下拉插件chained用法示例
10-21
jQuery作为一款流行的JavaScript库，其多级联动下拉插件chained大大简化了这一功能的实现。本文将深入分析jQuery多级联动下拉插件chained的用法，通过实例演示其功能和基本使用技巧。 首先，了解jQuery多级联动下拉...
jquery联动下拉框插件chained使用方法
no money,no women!
08-06 258
项目中需要用到三级联动下拉框，所以给在网上查了一下。 用到了 jquery.chained.js （官方下载链接）   使用这个插件需要引用jquery文件，亲测版本过高会报错，可能是里面有些东西已经废掉了吧 demo里面用的是jquery-1.8.2.js     &lt;script type="text/javascript" src="js/jquery-1.8.2.js"...
Jquery Chained Selects Plugin 多级联动下拉框插件
westonduo的专栏
08-26 1105
在这一章节里， 和大家分享一个基于 jQuery 的多级联动下拉框插件， 同样也可以基于 ajax 来操作   该插件共有两个版本：   1、 如果你不需要通过外部请求来完成对子select内容的筛选， 可以使用 jquery.chained.min.js， 该版本是基于 class 名来决定子select中option内容， 另外如碰到 JavaScript 被禁用的
带搜索框的jQuery下拉框插件
weixin_33881041的博客
10-27 349
由于下拉框的条数有几十个，于是打算找一个可以搜索查找功能的下拉框，刚开始在网上看了几个，都是有浏览器兼容性问题，后来看到这个“带搜索框的jQuery下拉框美化插件 searchable”，看演示代码简单易用，支持多个浏览器。 不过在使用过程中碰到了几个问题，先后解决了。 1、多个下拉框放在一起会出现遮挡的问题，原文评论有个解决方法： 在jquery.searchableSelect.js文...
第29款插件:第24款插件：jquery.chained.js多级联动插件
skace的专栏
01-20 790
描述：Chained 是一个简单易用的轻量级 jQuery 多级联动插件，使用它可快速创建多级联动的下拉列表。它通过在 Select 中设置 class 样式名来关联上级列表，下拉列表数据来源多样性，可以从本地 js 加载，或者使用 AJAX 从服务器端异步获取 JSON 数据。更重要的是它完美支持多种浏览器，没有兼容性问题。 图片展示： 兼容浏览器：IE6+/Firefox/
jQuery chained多级联动插件
05-12
摘要:脚本资源,Ajax/JavaScript,多级联动菜单,下拉框　jquery_chained基于jQuery的一款很不错的jQuery 多级联动插件多级联动插件，本例运行于PHP环境，也可以在ASP、JSP、中使用。jQuery 发展到现在，拥有相当多的...
jquery_chained：链式选择jQuery和Zepto
03-04
如果您不想进行外部查询来设置子选择的内容，请使用jquery.chained.js 。 此版本使用数据属性来确定内容。 对于更复杂的场景，维护数据属性将变得很麻烦。 另外，如果要对数据库进行查询，请使用jquery.chained....
基于JQuery的Select下拉框联动（级联）
ZYWANG--技术备忘录
01-06 719
这段时间在指导学生完成实训项目，由一个用到了JQuery进行下拉框（select）联动（添加删除option）的操作，本来在上课中都是讲过的，但时间一长都忘光了，下面把这段简单的JS贴出来，给入门者一个DEMO吧，以后有学生不会写的时候他能到这找到参考。 代码要点： 1、使用JQuery给select标签添加option元素时，直接使用： $("筛选符").append("&lt;optio...
前端项目-jquery-chained.zip
09-03
前端项目-jquery-chained,简单的链接选择。您可以从两个不同的版本中进行选择。普通版本使用select选项的类名来决定子select的内容。它不进行任何外部Ajax（j）查询。远程版本进行外部查询，并从返回的JSON响应生成子select。
探索 jQuery-UI-Multiselect-Widget：一款高效多选下拉插件
最新发布
gitblog_00013的博客
03-26 791
探索 jQuery-UI-Multiselect-Widget：一款高效多选下拉插件 jquery-ui-multiselect-widgetjQuery UI MultiSelect widget项目地址:https://gitcode.com/gh_mirrors/jq/jquery-ui-multiselect-widget 在前端开发中，我们经常需要处理多选下拉列表这样的交互元素，这正是...
Chosen
weixin_33958585的博客
04-01 325
前言： 想要达到下拉框有多选的情况。 过程： 1.因为本次工作项目使用的是surperUI，而它则是基于bootstrap框架搭建而成的。于是自然而然的就想到了使用bootstrap中的select插件。可是因为不太熟悉该框架的使用方法，于是看了一下使用方法，就上手写代码了。知道最终研究细节时，才发现出现了一些问题： 首先，不会取到select的value值；其次，不会回显其值。反复考量之...
利用jquery.chained.remote实现多级级联
weixin_30319153的博客
06-21 83
多级级联一直是前端比较烦人的一个功能，本次用jquery的插件，chained.remote实现多级级联。 应用场景：至少有二个下拉框，下拉框的个数不定。 应用步骤： 1.引入js文件，当然这个插件需要自己去下载。 <!-- 多级联动 --> <script type="text/javascript" src="./static/js/jquery.chained...
使用jQuery创建Ajaxy链式选择
cuke3186的博客
08-05 366
AJAX chained selects with jQuery. Today we will talk about creating dependent (chained) selects for your projects. This can be any related elements at your website. As example dependent fields to sele...
多个强大的jQuery插件应用实例
weixin_30399155的博客
04-03 195
50多个强大的jQuery插件应用实例 原文:50+ Amazing Jquery Examples- Part1 jQuery是近段时间里比较流行的一个JavaScript框架，不断有使用者开发出新的 jQuery插件。下面收集了50个开发者最喜欢使用的jQuery插件。这仅仅是第一个系列，你先品尝，第二道大餐即将到来。Sliding Panels －滑动门控制...
再谈 最速下降法/梯度法/Steepest Descent
04-20 1233
转载请注明出处：http://www.codelast.com/ 最速下降法（又称梯度法，或Steepest Descent），是无约束最优化领域中最简单的算法，单独就这种算法来看，属于早就“过时”了的一种算法。但是，它的理念是其他某些算法的组成部分，或者说是在其他某些算法中，也有最速下降法的“影子”。因此，我们还是有必要学习一下的。 我很久以前已经写过一篇关于最速下降法的文章了，但是这里
SparseLM Demo示例分析
Yan
04-09 1570
编译好SparseLM后，其中的第一个Demo是Chained Rosenbrock function，其方程式如下：f1=10*(x[i]*x[i]-x[i+1]) f2=x[i]-1这个方程在JORGE的文章中也写成： 在Andrew的文章中又是： 而Jan Vlcek写的是： 我不是学数学的，不知道怎么还写了这么多种不同的样子的方程；此处暂且按照demo中的样子来分析吧。首先还是
fastadmin 动态下拉表单联动
05-28
在 FastAdmin 中实现动态下拉表单联动，可以使用 FastAdmin 自带的表单组件以及 jQuery 插件 Chained Selects。 具体实现步骤如下： 1. 定义两个联动的下拉框，如下： ```php $form->select('province_id', '省份')->options('/api/province'); $form->select('city_id', '城市')->options('/api/city')->rules('required'); ``` 其中 `province_id` 和 `city_id` 分别是表单项的 name 值，`/api/province` 和 `/api/city` 是获取数据的接口地址。 2. 在控制器中定义接口方法，用于获取城市数据，如下： ```php namespace app\admin\controller; use think\Controller; class ApiController extends Controller { public function province() { $provinceList = db('province')->select(); return json($provinceList); } public function city() { $provinceId = input('get.province_id'); $cityList = db('city')->where('province_id', $provinceId)->select(); return json($cityList); } } ``` 其中 `province` 方法返回所有省份数据，`city` 方法根据省份 ID 获取该省份下的城市数据。 3. 使用 Chained Selects 插件实现下拉框联动，如下： ```js $(function() { // 省份下拉框改变事件 $('select[name="province_id"]').change(function() { var provinceId = $(this).val(); // 清空城市下拉框 $('select[name="city_id"]').empty(); // 动态加载城市数据 $.getJSON('/admin/api/city', {province_id: provinceId}, function(data) { $.each(data, function(i, item) { $('select[name="city_id"]').append('<option value="' + item.id + '">' + item.name + '</option>'); }); // 触发城市下拉框的 change 事件 $('select[name="city_id"]').trigger('change'); }); }); // 城市下拉框改变事件 $('select[name="city_id"]').change(function() { // TODO: 根据城市 ID 加载其他数据 }); // 初始化省份下拉框 $('select[name="province_id"]').trigger('change'); }); ``` 其中 `change` 事件监听省份下拉框的改变，根据选中的省份 ID 动态加载城市数据，并将加载的城市数据添加到城市下拉框中。同时，触发城市下拉框的 `change` 事件，以便根据城市 ID 加载其他数据。最后，通过触发省份下拉框的 `change` 事件，完成初始化操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值