jquery插件 autoComboBox 自动创建联动的下拉框如:省市区联动

废话{

诞生背景:

问: 1.大家在做省市区下拉框联动,或者是产品分类联动,或者是部门联动等下拉框时怎么做? 是用ajaxpro.dll 还是jquery ajax呢??

答: 是,留下继续阅读.

否,跟帖回复你的方法

结论:每次重复劳动重复创造联动的下拉框, 累,想死!! 读完本文您也许可以找到更好的方法来实现无限级(理论) 的联动下拉框,也许只要10秒钟就够了.

就这样,一个自动产生联动下拉框的插件诞生了...

本插件依赖于jquery1.4.2 最低版本自行测试.

}

废话完毕.

代码:

　　调用方法:

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("错误了");
        }

看到此处您是否会用了???如果不会,你懂的,回帖....

接下来说下"修改"功能

如:刚才用户选择了自己的地址, 那么现在用户需要修改,用户刚才选择到了"区",我们要初始化联动下拉框并且要设置区,市,省的默认值.

很简单: 在上面的代码加一句话(下方红色标注的代码)就会自动初始化带默认值的联动下拉框

例:

// ps:只请求一次数据库,数据源将存放在客户端
data:data,

                defaultValue: 76,
                firstValue: [true, "==请选择==", "==请选择=="] //是否自动创建第一个值这个值通常为请选择 ,不限等
            });

到此介绍完毕

源码下载, 猛点此处V1.0

(源码只包括插件源码,转换json格式字符串的dll)

2010年12月21日17:35:53编辑

明日更新增加获得用户选中项的text功能.

感谢迷途的小书童提出的意见..

2011年1月4日17:12:39更新

版本 v1.1

更新内容

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

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

性能的优化

源码下载,猛点此处v1.1

jquery插件 autoComboBox 自动创建联动的下拉框 如:省市区联动

jquery插件 autoComboBox 自动创建联动的下拉框如:省市区联动