`
天机老人
  • 浏览: 151428 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

用的最多的Jquery插件:AjAx下拉列表框(SELECT)jquery插件

    博客分类:
  • Ajax
阅读更多
    这个是我用的比较多的因为,要考虑到下拉联动,而且还要和后台数据连动。
     大家一看到ajax就开始怕,其实不用怕,这一切jquery和我们现在要用的插件都帮我们封装的很好,而且很好用。你要做的就是选对你要施展下拉联动效果的对象即可。(也就说可以看一下jquery的选择器,就是如何选标签就是js中的DOM,这个真是太简单了,我想没有必要多讲吧!)

首先是ajax填充插件FillOptions,这个插件可以通过ajax方法获取数据并把数据添加到下拉列表框,数据格式支持xml格式和json格式,插件定义如下
FillOptions(url,options)
参数说明
    url:ajax请求的地址,必须
    options包括如下参数
datatype:ajax请求返回的数据格式,可以是”xml”或”json”,默认为”json”
    textfield:ajax请求返回的数据中下拉列表框选项文本的字段,默认为”text”
    valuefiled:ajax请求返回的数据中下拉列表框选项值的字段,默认为”value”
    keepold:布尔类型,是否保留下拉列表框选项原有选项,默认为不保留
    selected:数值型,填充选项后第几项为选中状态,默认为0

实例如下:
            $("#Select1").FillOptions("handler1.ashx?type=json",{datatype:"json",textfield:"province",valuefiled:"provinceID"});

实例说明:
Select1是页面上一个下拉列表框,通过访问"handler1.ashx?type=json"这个地址,返回“[{"provinceID":"110000","province":"北京市"},{"provinceID":"120000","province":"天津市"}]”这样格式的数据,然后通过指定的textfield和valuefiled参数,生成下拉列表框的option并添加到Select1。更多例子可以看下载中的test.htm 下拉列表框联动插件CascadingSelect,这个插件是基于上面FillOptions插件制作的,可以实现两个下拉列表框的联动,定义如下:         CascadingSelect(target,url,options,endfn)参数说明:         target:需要联动的下拉列表框,必须         url:ajax请求的地址,必须         options与FillOptions的类似,增加了一个参数         parameter:ajax请求时传回值的参数名,必须         endfn:类型是function,完成联动后执行实例如下:            $("#Select1").CascadingSelect(
                            $("#Select2"),
                                  "handler1.ashx?type=json",
                            {datatype:"json",textfield:"city",valuefiled:"cityID",parameter:"p"},
                            function(){
                                       $("#Select2").AddOption("请选择","-1",true,0);
                                $("#Select3").html("");
                                        $("#Select3").AddOption("无选项","-1",true,0);
                            }
            );
实例说明:Select1,Select2,Select3都是页面上的下拉列表框,通过设置parameter:”p”这个参数会生成一个"handler1.ashx?p=xxx&type=json”这样的地址来做ajax请求,xxx为select1所选择的值,返回后使用FillOptions来填充Select2的option。具体实例请看test1.htm中实现的省市区的三级联动。 添加一个列表项的插件AddOption,这个比较简单,用来向下拉列表框中添加一个列表项。定义如下:         AddOption (text,value,selected,index)参数说明:         text:文本型,列表项文本         value:文本型,列表项值         selected:布尔型,是否选择加入的列表项         index:数值型,加入位置 实例如下:    $("#Select2").AddOption("请选择","-1",true,0);
实例说明:向select2最上端插入一个文本为“请选择“,值为”-1“的列表项,并且是选中状态下载地址http://bbs.jquery.org.cn/viewthread.php?tid=637&extra=page%3D1
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    自制的操作下拉列表框(SELECT)的三个jquery插件(ajax填充、联动、增加选项)

    自己做了三个专门用来操作下拉列表框(select)的jquery插件,一是通过ajax方式填充列表项的FillOptions, 二是下拉列表框的联动插件CascadingSelect,三是手动添加列表项的AddOption插件 具体说明请看这里 ...

    自制的操作下拉列表框(SELECT)的三个jquery插件(ajax填充...

    SELECT jquery插件 ajax填充 SELECT jquery插件 ajax填充 SELECT jquery插件 ajax填充 SELECT jquery插件 ajax填充 好东东

    jQuery轻量级模块化select下拉列表框插件

    select3是一款基于jQuery或Zepto.js的轻量级模块化select下拉列表框插件。select3下拉列表框可以进行单选、以tag的形式进行多选、可以指定输入类型格式、可以进行分组选择、还可以ajax进行远程调用。

    jQuery下拉查询筛选插件Combo Select

    1. **模糊搜索**:用户在输入框中输入关键词,插件会实时更新下拉列表,显示与关键词匹配的选项,实现快速定位。 2. **可定制化**: Combo Select 允许开发者自定义样式和行为,如改变提示文字、设置搜索框样式、...

    jQuery下拉查询筛选插件Combo Select.zip

    jQuery下的 Combo Select 插件是一种高效且用户友好的下拉查询筛选工具,广泛应用于网页开发中,特别是需要在大量数据中快速查找和选择项时。这个插件是基于HTML5技术构建的,确保了在现代浏览器中的兼容性和性能。...

    jQuery inputbox表单美化插件自定义select框

    "jQuery inputbox表单美化插件自定义select框"是一个专注于改善select下拉框外观的解决方案。这个插件利用jQuery的强大功能,为传统的HTML select元素提供了自定义样式和交互效果,让表单看起来更加专业且用户友好。...

    三级联动下拉列表框(SELECT)jquery插件(js 三级联动) php版

    6. **jQuery.FillOptions.js**:这个名字暗示这可能是一个专门处理下拉列表填充的jQuery插件,用于根据JSON数据动态生成和填充下拉列表选项。 总的来说,这个项目利用了jQuery的事件处理和DOM操作能力,结合PHP...

    jQuery 下拉框插件-带列表,带输入,快速查找及结果分页展示的多功能选择器

    强大的jquery下拉框插件 下拉框展示带列表分页功能,适合下拉框大量数据展示 下拉框带快速查找,可以快速筛选 支持多选 基于jQuery、Bootstrap2、3开发 也可应用于无任何UI框架的原生HTML环境 Autocomplete输入自动...

    jquery select插件带搜索框的下拉选择框代码

    为了解决这个问题,开发者通常会使用jQuery插件来增强`select`的功能,如创建带搜索框的下拉选择框。 本项目提供的"jquery select插件"正是为了实现这样的功能。它允许用户在下拉列表中输入关键词进行搜索,从而...

    jquery搜索框下拉列表选择搜索分类效果.rar

    1. **jQuery插件**:可能使用了特定的jQuery插件来实现下拉列表的选择效果,如Select2或Chosen。这些插件提供了高级的下拉列表样式和功能,如自动补全、搜索过滤和多选。 2. **HTML和CSS**:HTML元素(如`<input>`...

    240多个jQuery插件

    2. jQuery controlled dependent (or Cascading) Select List:联动下拉列表。 3. Multiple Selects:多选下拉框。 4. Select box manipulation:自定义选择框样式和行为。 5. Select Combo Plugin:增强的下拉框...

    jquery插件-select2

    **jQuery插件Select2详解** Select2是一款基于jQuery的下拉选择框插件,它极大地扩展了原生HTML `<select>` 元素的功能,提供了更丰富的用户体验和更强的可定制性。这款插件广泛应用于网页开发中,尤其适用于需要...

    jQuery带分页的下拉选择框插件.zip

    2. **下拉选择框**:在HTML中,`<select>`元素用于创建下拉列表,但原生的HTML下拉框功能有限。使用jQuery插件可以扩展这些功能,比如添加搜索、多选、自定义样式等特性。 3. **自动补全**:此插件包含自动补全功能...

    jQuery插件教程(搜罗了全部插件).docx

    - jQuery controlled dependent (or Cascading) Select List:创建级联下拉列表。 - Multiple Selects:支持多选的下拉框。 - Select box manipulation:提供对选择框的各种操作方法。 - jQuery - LinkedSelect...

    jquery下拉列表树插件代码.zip

    在本文中,我们将深入探讨jQuery下拉列表树插件代码,这是一种用于构建树形结构的下拉选择框的实用工具。这种插件广泛应用于网页设计中,为用户提供更直观、更易于操作的选择体验,尤其在处理层级关系数据时非常有用...

    JQuerry 插件介绍

    - Select Combo Plugin:创建具有搜索功能的下拉列表。 - Choose Plugin (Select Replacement):美化和增强标准的HTML选择框。 4. 表单基本、输入框、选择框等: - jQuery Form Plugin:简化表单提交和AJAX操作...

    jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)

    标题“jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)”和描述“Selectator是一款实现多选和搜索过滤功能的jQuery下拉列表框插件。下文给大家介绍jQuery使用Selectator插件实现多选下拉列表过滤框,...

    jQuery下拉列表框双向选择

    而“jQuery下拉列表框双向选择”则涉及到一种交互设计,允许用户在一个下拉列表中选择项,并同时将这些选择同步到另一个相关的下拉列表中,实现数据的双向同步。 要实现这样的功能,我们需要理解以下几个关键知识点...

    jQuery Select下拉框分类菜单多选插件

    5. **交互性**:jQuery的事件处理功能使得这款插件能够响应用户的操作,如点击、选择和取消选择等,从而提供动态和响应式的用户体验。 为了实现这些功能,插件通常会通过JavaScript函数来处理DOM元素的创建、修改和...

Global site tag (gtag.js) - Google Analytics