jquery插件 autoComboBox 下拉框

问: 1.大家在做省市区下拉框联动,或者是产品分类联动,或者是部门联动等下拉框时怎么做? 是用ajaxpro.dll 还是jquery ajax呢??
答: 是,留下继续阅读.
否,跟帖回复你的方法
结论:每次重复劳动 重复创造联动的下拉框, 累,想死!! 读完本文 您也许可以找到更好的方法来实现 无限级(理论) 的联动下拉框,也许只要10秒钟就够了.
就这样,一个自动产生联动下拉框的插件诞生了...
本插件依赖于jquery1.4.2 最低版本自行测试.
废话完毕.
代码:
<div class="zldd-AutoComboBox" id="div_autoComboBox">
</div>
　　调用方法:


代码如下:

var data= [{ "id": 25, "text": "淮安分公司", "children": [{ "id": 26, "text": "办公室（行政人事培训）"}] }, { "id": 52, "text": "研发部" }, { "id": 53, "text": "财务部"}]
$("#div_autoComboBox").AutoComboBox({
cssClass: "autoComboBox",
nullDispaly: true,
//url: "ComboBoxTreeDept_Data.aspx",
//如果没有使用远程数据 则可以使用本地数据源 使用上面定义的data变量 注:如果url不为空时 优先使用远程数据源
// ps:只请求一次数据库,数据源将存放在客户端
data:data,
firstValue: [true, "==请选择==", "==请选择=="] //是否自动创建第一个值 这个值通常为 请选择 ,不限等
});

结果: 这样就一个无限级(理论) 的联动下拉框就出来了.. 如果你拷贝一下以上代码,修改一下url参数 10秒钟够了吧??? 注:关于json格式,包括名称,请自行转换,本源码也包含一个只针对本插件转换json的一个dll.
(引用后:
///dataset 数据源
///要显示text
///id,, 你懂的
///父id, 你也懂的
///忽略....
string treeJson = zlddEasyUiHelp.CreateTree.DataSetToTree(ds_department, "Dept_Name", "Dept_ID", "Dept_PId",false);
)
问:我怎么获取用户选择的值.?
答: 一句代码搞定,并支持多个参数重载


代码如下:

$("#div1").ComboBoxGetValue([index],[ErrorFn]);
//可选参数说明:
//index,获取第几个下拉框的值,默认最后一个(如果不填写也是获取最后一个值)
// ErrorFn,获取值时遇到错误 如:假设现在是省市区联动,您要获取第三个下拉框(区),但是用户只选择到了市,这将会获取不到,那么将调用传递进去的方法
//该回调方法写法如下:
var ErrorFn = function () {
alert("错误了");
}

看到此处您是否会用了???如果不会,你懂的,回帖....
接下来说下"修改"功能
如:刚才用户选择了自己的 地址, 那么现在用户需要修改,用户刚才选择到了"区",我们要初始化联动下拉框 并且要设置区,市,省的默认值.
很简单: 在上面的代码加一句话(下方红色标注的代码)就会自动初始化带默认值的联动下拉框
例:


代码如下:

$("#div_autoComboBox").AutoComboBox({
cssClass: "autoComboBox",
nullDispaly: true,
//url: "ComboBoxTreeDept_Data.aspx",
//如果没有使用远程数据 则可以使用本地数据源 使用上面定义的data变量 注:如果url不为空时 优先使用远程数据源
// ps:只请求一次数据库,数据源将存放在客户端
data:data,
defaultValue: 76,
firstValue: [true, "==请选择==", "==请选择=="] //是否自动创建第一个值 这个值通常为 请选择 ,不限等
});

关于"修改"功能的诞生背景,有兴趣的看...
话说本插件是不可以设置默认值的,也就是不能自初始化带默认值的下拉框
但是,由于一个美女诱惑我,说"你要弄出来,我就干嘛嘛",,具体干嘛,各位懂的....
到此介绍完毕
源码下载,/201012/yuanma/AutoComboBoxs.rar(已更新)

(源码只包括插件源码,转换json格式字符串的dll)
2011年1月4日17:12:39更新

版本 v1.1

更新内容

修复部分已知bug(如果子类没有顶级选项如"请选择" 造成第三级无法创建的问题)

增加获取选定项对象的方法

性能的优化

原文: http://www.cnblogs.com/337212522/archive/2010/12/21/1912381.html

赞 (0)

相关推荐

  • jQuery+easyui中的combobox实现下拉框特效

    1.第一种写法:Input框中显示: 复制代码 代码如下: <input id="cc" class="easyui-combobox" name="name" data-options="valueField:'value',textField:'text',data:[{'value':'1','text':'java'},{'value':'2','text':'C#'}]"/> 2. 第二种用法,在list

  • WinForm实现为ComboBox绑定数据源并提供下拉提示功能

    WinForm实现为ComboBox绑定数据源并提供下拉提示功能

    本文实例展示了WinForm实现为ComboBox绑定数据源并提供下拉提示功能,这是一个非常有实用价值的功能,具体实现方法如下: 主要功能代码如下: /// <summary> /// 为ComboBox绑定数据源并提供下拉提示 /// </summary> /// <typeparam name="T">泛型</typeparam> /// <param name="combox">ComboBox<

  • Ext中下拉列表ComboBox组件store数据格式用法介绍

    复制代码 代码如下: var p_years = new Ext.form.ComboBox( { fieldLabel : '统计年份', anchor : anchor_w, mode : 'remote', maxHeight:100, triggerAction : 'all', selectOnFocus : true, forceSelection : true, editable : false, //store :[['11', '2011'], ['12', '2012'],[

  • c#构造ColorComboBox(颜色下拉框)

    复制代码 代码如下: class ColorComboBox : ComboBox    {        /// <summary>        /// 当前选中色        /// </summary>        public Color SelectedColor        {            get { return Color.FromName(this.Text); }        }        /// <summary>     

  • Extjs中ComboBoxTree实现的下拉框树效果(自写)

    Extjs中ComboBoxTree实现的下拉框树效果(自写)

    最近涉及到的一个项目中,需要实现ComboBoxTree的效果,首先,看看效果吧--  在Extjs中是没有这种效果的,所以得自己写,在网络上看了看别人的资料,自己再总结了一下,修改了一下,代码如下: 复制代码 代码如下: Ext.ux.TreeCombo = Ext.extend(Ext.form.ComboBox, { constructor: function (cfg) { cfg = cfg || {}; Ext.ux.TreeCombo.superclass.constructor.

  • ComboBox（下拉列表框）通过url加载调用远程数据的方法

    ComboBox(下拉列表框) ComboBox(下拉列表框)常用属性: valueField: 基础数据值名称绑定到该下拉列表框.- 提交值 textField:基础数据字段名称绑定到该下拉列表框.-显示值 url:通过URL加载远程列表数据. mode:定义了当文本改变时如何读取列表数据.设置为'remote'时,下拉列表框将会从服务器加载数据.当设置为"remote"模式时,用户输入将被发送到名为'q'的HTTP请求参数到服务器检索新数据. 方法: clear:清除下拉列表框的值

  • jquery插件 autoComboBox 下拉框

    问: 1.大家在做省市区下拉框联动,或者是产品分类联动,或者是部门联动等下拉框时怎么做? 是用ajaxpro.dll 还是jquery ajax呢?? 答: 是,留下继续阅读. 否,跟帖回复你的方法 结论:每次重复劳动 重复创造联动的下拉框, 累,想死!! 读完本文 您也许可以找到更好的方法来实现 无限级(理论) 的联动下拉框,也许只要10秒钟就够了. 就这样,一个自动产生联动下拉框的插件诞生了... 本插件依赖于jquery1.4.2 最低版本自行测试. 废话完毕. 代码: <div clas

  • 基于jQuery的select下拉框选择触发事件实例分析

    本文实例讲述了基于jQuery的select下拉框选择触发事件实现方法.分享给大家供大家参考,具体如下: 我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" onclick="func(0)">选项一</option> <option value="1" onclick="func(1

  • jquery实现select下拉框美化特效代码分享

    jquery实现select下拉框美化特效代码分享

    这是一款基于jquery实现select下拉框美化特效代码,用户可以选择下拉菜单内容,是一款非常实用的特效源码.  为大家分享的jquery实现select下拉框美化特效代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/g.css" type="text/css&

  • Jquery Easyui自定义下拉框组件使用详解（21）

    Jquery Easyui自定义下拉框组件使用详解（21）

    本文实例为大家分享了Jquery Easyui自定义下拉框组件的实现代码,供大家参考,具体内容如下 加载方式 JS调用加载 自定义下拉框不能通过标签的方式进行创建. <input id="box" /> <script> $(function () { //JS 加载调用 $('#box').combo({ required : true, multiple : true, }); }); </script> 属性列表 <script>

  • jQuery操作select下拉框的text值和value值的方法

    1.jquery获取当前选中select的text值 var checkText=$("#slc1").find("option:selected").text(); 2.jquery获取当前选中select的value值 var checkValue=$("#slc1").val(); 3.jquery获取当前选中select的索引值 var index=$("#slc1 ").get(0).selectedIndex; 4

  • 基于jQuery Ajax实现下拉框无刷新联动

    本文实例为大家分享了jQuery Ajax实现下拉框无刷新联动的具体代码,供大家参考,具体内容如下 HTML代码: @{ Layout = null; } @using DAL; @using System.Data; @{ AreaDal areaDal = new AreaDal(); string areaId = ViewBag.areaId; DataRow drArea = areaDal.GetArea(areaId); string countyId = drArea == nu

  • 基于jquery的checkbox下拉框插件代码

    option_check.js代码 : 复制代码 代码如下: /***************************************** 调用方法为: Jselect($("#inputid"),{ bindid:'bindid', hoverclass:'hoverclass', optionsbind:function(){return hqhtml();} }); inputid为下拉框要绑定的文本框id bindid为点击弹出/收回下拉框的控件id hoverclas

  • jQuery实现select下拉框获取当前选中文本、值、索引

    话不多说,请看代码: //直接保存后缀.htnl用谷歌浏览器打开,亲测有效 <head> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> $(function(){ //为Select添加事件,当选择其中一项时触发 $("select:eq(0)").change(function(){ //code }

  • jQuery实现级联下拉框实战（5）

    jQuery实现级联下拉框实战（5）

    今天来完成jQuery实战的级联下拉框效果.效果功能如下: 页面默认只提供汽车厂商,当选择了具体的某品牌汽车,汽车类型下拉框就会动态的显示出来,选择对应的类型,然后出来该汽车类型对应的轮胎类型下拉框显示出来,选中轮胎类型,页面的正中间会显示出汽车的图片. 思路分析如图: 建立我们的html页面,程序清单如下: 代码清单1.1: chainSelect.jsp <body> <div class="loading"> <p><img src=&q

  • 利用jquery获取select下拉框的值

    利用jquery获取select下拉框的值

    jquery不是特别熟练,每次使用不常用的就要百度,特地记录下来. 我的下拉框是: <div class="form-group"> <select class="form-control" id="iv_level"> <option value="">店员</option> <option value="">店长</option>

随机推荐