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

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

    博客分类:
  • Ajax
阅读更多
首先是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“的列表项,并且是选中状态
分享到:
评论
发表评论

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

相关推荐

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

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

    jquery ajax 实现省市县下拉列表联动

    每个列表都有一个`onchange`事件,当用户在上一级列表中做出选择时,该事件触发,通过`Ajax`向服务器发送请求,获取相应的下一级数据。 以下是基本的实现步骤: 1. **HTML结构**:创建三个`<select>`元素,分别...

    jQuery ajax JSON 下拉列表框级联

    本示例中的"jQuery ajax JSON 下拉列表框级联"就是这样的一个应用。 1. **jQuery**:jQuery是一个高效、简洁且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在本案例中,jQuery用于...

    jquery实现select互斥联动

    3. 互斥联动:互斥联动是指当用户在一个下拉列表中选择一个选项时,其他关联的下拉列表会根据预设规则更新其可选项,通常用于限制用户的选择范围,保证数据的正确性。 二、实现步骤 1. HTML结构:首先,需要创建三...

    ajax 下拉列表框

    通过以上步骤,我们可以实现一个基于Ajax的下拉列表框联动效果,让用户在选择省份时能实时看到对应的城市列表,提升网站的交互体验。这个压缩包文件"city"可能包含了预设的省份和城市数据,你可以解压并使用这些数据...

    jQuery+ajax实现三级级联

    在这个“jQuery+ajax实现三级级联”的实例中,我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统,这在数据筛选和表单填写中十分常见,如地区选择、部门分类等场景。 首先,jQuery是一个轻量级...

    jquery ajax xml 实现select联动

    本示例中,“jquery ajax xml 实现select联动”指的是利用jQuery的Ajax功能从XML文件中获取数据,动态更新HTML中的<select>元素,实现两个或多个下拉列表之间的联动效果。这种功能在多级分类选择、地区选择等场景中...

    jQuery世界城市三级联动下拉选择代码

    这个"jQuery世界城市三级联动下拉选择代码"是一个实现这种功能的示例,它允许用户通过三个相互关联的下拉列表来选择全球的国家、省份(或州)以及城市。 首先,`jquery.min.js`是jQuery库的核心文件,它是...

    Jquery实现select下拉列表根据radio选项级联

    本主题将探讨如何利用jQuery实现一个特定的功能——“select下拉列表根据radio选项级联”。这个功能常用于创建动态表单,其中,用户选择一个radio按钮后,相关的select下拉列表会自动更新其选项,以提供与所选radio...

    Jquery各种插件和JQuery Ajax三级联动地区下拉框 & 非Ajax实现三级联动

    **jQuery 插件和 jQuery AJAX 三级联动地区下拉框详解** 在网页开发中,我们经常需要实现一种功能,即用户在选择一个地区时,下拉框会根据所选地区的层级关系动态加载下级地区。这种功能被称为“三级联动”,在电商...

    jquery怎样实现ajax联动框(二)

    在这个实例中,我们介绍如何使用jQuery来实现一种联动框的交互效果。联动框,也称为级联下拉框,是一种常见的Web界面元素,允许用户通过选择某个值(如国家或地区)来动态改变另一个选择列表的内容(如城市或地区)...

    jquery+ajax+json省市区三级联动

    这里我们探讨的主题是“jquery+ajax+json省市区三级联动”,这个功能利用jQuery库的便捷性,结合AJAX异步数据交换,以及JSON数据格式来实现动态地加载和更新省市区的选项。 首先,jQuery是一个强大的JavaScript库,...

    Sql+Jquery+Ajax实现省市县区无刷新动态联动查询

    在IT领域,尤其是在Web开发中,"Sql+Jquery+Ajax实现省市县区无刷新动态联动查询"是一个常见的需求,它涉及到数据库操作、前端交互以及页面动态更新等多个关键环节。以下将详细介绍这一技术栈的工作原理及实现方法。...

    可初始化值的jQuery省市三级联动插件

    2. **事件绑定**:使用jQuery的`.on()`方法监听select的`change`事件,当用户选择一个选项时,触发相应的函数来更新下级选择框。 3. **初始化**:插件提供了一个方法,允许开发者设置初始值。这涉及到解析预设的...

    jQuery 级联下拉列表

    3. **jQuery插件**:`$().related`这个插件会监听第一个下拉列表(通常是省份)的选择事件,当用户选择一个省份后,通过JavaScript或者Ajax获取相应的城市数据,并填充到第二个下拉列表。同理,选择城市后,获取区县...

    jQuery省市区三级联动插件

    三级联动是指在三个下拉列表中,当用户在一个下拉框中做出选择时,其他两个下拉框的内容会根据所选值动态更新。例如,在省市区三级联动中,选择一个省份后,市的选项会根据省份自动筛选,接着选择市后,区的选项也会...

    基于jquery的N级下拉联动

    下拉联动是指在一个下拉列表中选择一个选项时,根据预设的关联规则,动态改变另一个或多个下拉列表的内容。这种联动通常涉及到多个级联的select元素,用户选择每一级的选项都会影响到下一级的选择范围。 三、N级...

    Ajax实现java web 中下拉列表二级联动

    在Java Web开发中,二级联动下拉列表是一种常见的交互功能,通常用于地区选择、类别分类等场景。这个功能使得用户在选择一级选项时,二级选项会动态更新,提供相关的子选项。Ajax(Asynchronous JavaScript and XML...

Global site tag (gtag.js) - Google Analytics