`
xiangqian0505
  • 浏览: 323033 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery多级联动下拉插件chained(附DEMO)

 
阅读更多
<!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>
 
1
1
分享到:
评论

相关推荐

    jQuery多级联动下拉插件chained用法示例

    jQuery作为一款流行的JavaScript库,其多级联动下拉插件chained大大简化了这一功能的实现。本文将深入分析jQuery多级联动下拉插件chained的用法,通过实例演示其功能和基本使用技巧。 首先,了解jQuery多级联动下拉...

    jQuery chained多级联动插件

    摘要:脚本资源,Ajax/JavaScript,多级联动菜单,下拉框 jquery_chained基于jQuery的一款很不错的jQuery 多级联动插件多级联动插件,本例运行于PHP环境,也可以在ASP、JSP、中使用。jQuery 发展到现在,拥有相当多的...

    jquery.chained.remote

    `jquery.chained.remote` 插件利用 AJAX 技术,通过异步请求从服务器获取数据,动态更新下拉菜单,提高用户体验,减少不必要的数据传输。 首先,我们来深入了解 `jquery.chained.remote` 的核心功能: 1. **级联...

    前端项目-jquery-chained.zip

    前端项目-jquery-chained,简单的链接选择。您可以从两个不同的版本中进行选择。普通版本使用select选项的类名来决定子select的内容。它不进行任何外部Ajax(j)查询。远程版本进行外部查询,并从返回的JSON响应生成...

    jquery_chained:链式选择jQuery和Zepto

    如果您不想进行外部查询来设置子选择的内容,请使用jquery.chained.js 。 此版本使用数据属性来确定内容。 对于更复杂的场景,维护数据属性将变得很麻烦。 另外,如果要对数据库进行查询,请使用jquery.chained....

    jquery实现 城市选择框

    实际项目中,你可能会找到现成的jQuery插件,如“jQuery cascading dropdown”或“Chained Selects”,它们可以简化上述过程,提供更丰富的功能和自定义选项。 总结,使用jQuery实现城市选择框涉及HTML、CSS和...

    jQuery和Zepto的链接选择

    在提供的压缩包文件"tuupola-jquery_chained-44a7f83"中,我们可以看到一个名为"jquery_chained"的项目,这可能是一个jQuery插件,用于实现下拉列表的级联选择。在多级导航或筛选功能中,这样的插件能帮助用户更有效...

    【WordPress插件】2022年最新版完整功能demo+插件v2.11.0.zip

    "【WordPress插件】2022年最新版完整功能demo+插件v2.11.0 WooCommerce Chained Products Woocommerce Chied产品" ---------- 泰森云每天更新发布最新WordPress主题、HTML主题、WordPress插件、shopify主题、...

    【WordPress插件】2022年最新版完整功能demo+插件v1.5.zip

    "【WordPress插件】2022年最新版完整功能demo+插件v1.5 Gravity Forms Chained Selects Add-On 重力形成链接选择加载项" ---------- 泰森云每天更新发布最新WordPress主题、HTML主题、WordPress插件、shopify主题、...

    Chained Audio Plugins-开源

    标题中的“Chained Audio Plugins-开源”指的是一个开源项目,专注于实现音频处理的插件链接功能。这样的系统允许用户在音频工作流程中串联多个插件,以实现复杂的音频效果和处理。这种技术常见于音乐制作、音频编辑...

    fb_sys_fops.rar_Chained

    "fb_sys_fops.rar_Chained"这个压缩包文件包含了与中断处理相关的源代码,特别是关于"Chained IRQ handlers"的支持。 **Chained IRQ Handlers(级联中断处理)** 是一种在Linux内核中断处理框架中实现的机制,允许...

    intellij-idea-generate-chained-accessors:从 code.google.compintellij-idea-generate-chained-accessors 自动导出

    "intellij-idea-generate-chained-accessors" 是一个IntelliJ IDEA的插件,它自动化了getter、setter和builder方法的生成过程,特别是针对当前类的所有字段。这个插件最初是在Google Code上托管的,但现在可能已经...

    Ajax-chained-combobox.zip

    Ajax-chained-combobox.zip,带有laravel和vuejs的简单链式组合框,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载...

    If Chained Implications in Properties Weren't So Hard, They'd Be Easy

    本文档主要探讨了链式蕴含(Chained Implications)在属性验证中的应用及其复杂性。作者Don Mills通过多个示例详细介绍了蕴含的概念、术语以及如何利用链式蕴含来简化复杂的条件判断。文档中包含了对基本概念的假设...

    Daisy-chained_ADS1298ADS1299_continuous_conversio_

    Daisy-chained_ADS1298ADS1299_continuous_conversio_ads129x-emulator

    Chained Exploits Advanced Hacking Attacks from Start to Finish 无水印原版pdf

    Chained Exploits Advanced Hacking Attacks from Start to Finish 英文无水印原版pdf pdf所有页面使用FoxitReader、PDF-XChangeViewer、SumatraPDF和Firefox测试都可以打开 本资源转载自网络,如有侵权,请联系...

    harmonyos2-chained:用和谐驯服诺言——

    Chained是 Javascript 的一个实验和原型库。 它旨在展示一个概念并提供一些有限但有用的功能。 下面的所有示例都是用 Coffeescript 编写的(我猜这让我成为嬉皮士,对吧?)。 Chained允许显式链接函数——包括那些...

    i18next-chained-backend:一个i18next后端,用于链接多个后端(添加后备,缓存等)

    $ npm install i18next-chained-backend 接线: import i18next from 'i18next' ; import Backend from 'i18next-chained-backend' ; i18next . use ( Backend ) . init ( i18nextOptions ) ; 与所有模块一样,...

Global site tag (gtag.js) - Google Analytics