jquery.chained与jquery.chained.remote使用以及区别

---恢复内容开始---

jquery.chained与jquery.chained.remote总体来说一个是静态的一个是动态的,

jquery.chained是静态的,他可以显示和隐藏页面上select的选项,他是根据类来显示select的数据项

例如:

<select id="mark" name="mark">
  <option value="">--</option>
  <option value="bmw">BMW</option>
  <option value="audi">Audi</option>
</select>
<select id="series" name="series">
  <option value="">--</option>
  <option value="series-3" class="bmw">3 series</option>
  <option value="series-5" class="bmw">5 series</option>
  <option value="series-6" class="bmw">6 series</option>
  <option value="a3" class="audi">A3</option>
  <option value="a4" class="audi">A4</option>
  <option value="a5" class="audi">A5</option>
</select>

实例:$("#series").chained("#mark"); /* or $("#series").chainedTo("#mark"); */

  $("#series").chained("#series, #model");可以根据两个参数来显示数据项

jquery.chained.remote则是动态的取数据

实例:

$("#model").remoteChained({
    parents : "#series",//联动参数
    url : "/api/model.json"//ajax读取地址
});

$("#engine").remoteChained({
    parents : "#series, #model",//多个参数
    url : "/api/engine.json"
});

$("#engine").remoteChained({
    parents : "#engine, #model",
    url : "/api/series.json",
    loading : "Loading..."
});

注意:默认返回数据格式如下,但是这样客户端会自动来排序

{
  "" : "--",
  "series-1" : "1 series",
  "series-7" : "7 series",
  "series-6" : "6 series",
  "series-3" : "3 series",
  "series-5" : "5 series",
  "selected" : "series-6"
}

客户端自动排序为:

{
  "" : "--",
  "series-1" : "1 series",
  "series-3" : "3 series",
  "series-5" : "5 series",
  "series-6" : "6 series",
  "series-7" : "7 series",
  "selected" : "series-6"
}

如果不想被从新拍下,

返回格式如下:

[
  [ "", "--" ],
  [ "series-1", "1 series" ],
  [ "series-3", "3 series" ],
  [ "series-5", "5 series" ],
  [ "series-6", "6 series" ],
  [ "series-7", "7 series" ],
  [ "selected", "series-6" ]
]

或者

[
  { "" : "--" },
  { "series-1" : "1 series" },
  { "series-3" : "3 series" },
  { "series-5" : "5 series" },
  { "series-6" : "6 series" },
  { "series-7" : "7 series" },
  { "selected" : "series-6" }
]

---恢复内容结束---

时间: 2024-10-10 09:30:44

jquery.chained与jquery.chained.remote使用以及区别的相关文章

Jquery 分页插件 Jquery Pagination

Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也挺简单明了的,也助于自己写个小插件. 不过我比较懒,一般直接拿着各种插件用,想偷懒的同学们也可以用用看: Jquery Pagination 大家可以去这里查看下演示:http://www.xuetub.com/plugin/jquery/221 使用方法也比较简单: <div id="pag

jQuery验证空间jquery.validate.js使用说明+中文API

--------转载自http://www.cnblogs.com/hejunrex/archive/2011/11/17/2252193.html jQuery plugin: Validation 使用说明 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 转载自:http://blog.sina.com.cn/s/blog_608475eb0100h3h1.html 一.导入js库 <script src=

jQuery遮罩插件 jquery.blockUI.js

Overview jQuery BlockUI 插件可以在不同锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为.该插件激活时,会组织用户在页面进行的操作,直到插件被关闭.BlockUI通过向DOM中添加元素实现其外观和组织用户交互的行为. 使用jQuery BlockUI,首先需要在jQuery后面引用 jquery.blockUI.js jquery.blockUI.js插件下载地址:http://jquery.malsup.com/block/ 用法很简单,组织用户对页面的交互: $.

Jquery.Form和jquery.validate 的使用

有些功能需要我们利用Ajax技术进行POST提交表单,这时候就需要用到jquery.Form ,它有两种方式进行提交,AjaxForm和AjaxSubmit方式.            AjaxForm 方式必须先绑定表单,它一般在$(document).ready(function () {}里定义,它能让表单不刷新页面的情况下POST到目标. 如:                     $(document).ready(function () {                   $(

Unit02: jQuery事件处理 、 jQuery动画

Unit02: jQuery事件处理 . jQuery动画 jQuery实现购物车案例 <!DOCTYPE html> <html> <head> <title>购物车</title> <meta charset="utf-8" /> <style type="text/css"> h1 { text-align:center; } table { margin:0 auto; wi

jQuery:has()和jQuery:contains()区别

jQuery:has()和jQuery:contains()两个方法比较类似.不同点在于: has是判断标签的 contains是判断文本的 1.jQuery:has() <div><p>Hello</p></div> <div>Hello again!</div> $("div:has(p)").addClass("test"); //含有p标签的div标签增加test样式 注:has中的括号

JQuery之JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案

JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案 JQuery的版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的版本</title> <

Jquery(一) 初识Jquery,简单使用Jquery。

距离上一篇博文好像隔了很久的时间了额.好像是堕落了一阵子,前些时间去杭州找工作,被租房的事情给搞懵逼了,然后就回来了,回来在修炼一个月在出去奋斗把!加油,这两天把jquery,easyui和bootstrap这几个东西给记录一下,之前就学过,但是没记录下来,所以忘的很快,又没地方去复习,所以还是记录记录这些知识点.以便将来查看复习. --WH 一.什么是Jquery? 其实超级简单,不要把它想的太难了,Jquery就是一个js(javascript)类库. 1.1.什么是js类库? [JavaS

jquery插件之jquery.extend和jquery.fn.extend的区别

jquery.extend jquery.extend(),是拓展jquery这个类,即可以看作是jquery这个类本身的静态方法,例如: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/