欢迎您访问我爱IT技术网,今天小编为你分享的javascript教程:【jquery插件 autoComboBox 下拉框】,下面是详细的讲解!
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
关于jquery插件 autoComboBox 下拉框的用户互动如下:
相关问题:关于jquery动态创建easyui下拉框控件
答:textarea和select的jquery的clone方法有问题,textarea和select的值clone的时候会丢掉,这个是jquery的一个bug,网上有一个插件,下载地址如下:https://github.com/spencertipping/jquery.fix.clone/blob/master/jquery.fix.clone.js。就是在clo... >>详细
相关问题:jQuery能实现下拉框可编辑并可过滤功能吗
答:editable属性设为false。这是combo的属性,combobox继承了,直接在combobox里设置就好 >>详细
相关问题:jquery easyui combobox中 我想得到所有下拉框里面...
答:有两种方法: (1)给下拉框的每个选项加一个value值,给下拉框加一个class,使用 $(".obj").change(function(){ alert($(this).val());//这就是下拉选框中的值 }) (2)给每个选项加一个onclick事件,点击的时候直接获取就行。 >>详细
- 【firefox】firefox浏览器不支持innerText的解决
- 【Extjs】Extjs学习过程中新手容易碰到的低级错误
- 【clearInterval】js clearInterval()方法的定义
- 【ComboBox】ComboBox 和 DateField 在IE下消失的
- 【ajax】用js来解决ajax读取页面乱码-页面乱码
- 【dom】javascript dom追加内容实现示例-追加内容
- 【has】基于jquery的has()方法以及与find()方法以
- 【extjs】Extjs入门之动态加载树代码-动态加载树
- 【checkbox】让checkbox不选中即将选中的checkbox
- 【angularjs_scope】AngularJS中监视Scope变量以
- 评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
-
