EasyUI - Combo组件
-自定义下拉组件,有别于ComboBox下拉组件。
效果:
html代码:
<input id ="box" />
<div id ="fruits" style ="padding:5px;">
<div>请选择一种水果:</div>
<div>
<input type ="radio" name ="fruit" value ="01"/><span>苹果</span><br />
<input type ="radio" name ="fruit" value ="02"/><span>香蕉</span><br />
<input type ="radio" name ="fruit" value ="03"/><span>橘子</span><br />
<input type ="radio" name ="fruit" value ="04"/><span>芒果</span><br />
</div>
</div>
JS代码:
$(function () {
$('#box').combo({
// * 集成自ValidateBox *
required: true,
editable: false,
delay:,
missingMessage:'请选择值!',
}) //将内容添加到Combo组件中
$('#fruits').appendTo($('#box').combo('panel')); //点击选项在文本框中显示值
$('#fruits input').click(function () {
var v = $(this).val();//获取选中radio的value值
var s = $(this).next('span').text();//获取选中radio的text值
//将获取的值,设置到文本框的text,value中,并隐藏panel
$('#box').combo('setValue', v).combo('setText', s).combo('hidePanel');
}) })
EasyUI - Combo组件的更多相关文章
- 表单(上)EasyUI Form 表单、EasyUI Validatebox 验证框、EasyUI Combobox 组合框、EasyUI Combo 组合、EasyUI Combotree 组合树
EasyUI Form 表单 通过 $.fn.form.defaults 重写默认的 defaults. 表单(form)提供多种方法来执行带有表单字段的动作,比如 ajax 提交.加载.清除,等等. ...
- Easyui主要组件用法
Easyui主要组件用法说明: 1. combogrid用法 说明:combogrid可提供翻页列表的数据选择并可进行数据的过滤查询(查询的传人参数为q,可在控制器中获取这个参数传过来的值,下面的示 ...
- Easyui部分组件讲解
Easyui部分组件讲解 目 录 1.... Accordion(可折叠标签)... 2 1.1 实例... 2 1.2 参数... 3 2.... DateBo ...
- 对easyui datagrid组件的一个小改进
#对easyui datagrid组件的一个小改进 ##问题 在实际项目中使用datagrid时,受版面限制,有时候表格不能太大,这时候表格里面的内容就不能完全显示,用户需要经常拖动调整列宽才能看完整 ...
- easyUI panel组件
easyUI panel组件: 属性的使用: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- easyUI progressbar组件
easyUI progressbar组件: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- easyUI linkbutton组件
easyUI linkbutton组件: <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- easyUI tootip组件使用
easyUI tootip组件使用: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- easyUI resizable组件使用
easyUI resizable组件使用: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
随机推荐
- 剖析MFC六大关键技术(五六)--消息映射与命令传递
说到消息,在MFC中,“最熟悉的神秘”可算是消息映射,那是我们刚开始接触MFC时就要面对的东西.有过SDK编程经验的朋友转到MFC编程的时候,一下子觉得什么都变了样.特别是窗口消息及对消息的处理跟以前 ...
- poj 1056 IMMEDIATE DECODABILITY(KMP)
题目链接:http://poj.org/problem?id=1056 思路分析:检测某字符串是否为另一字符串的前缀,数据很弱,可以使用暴力解法.这里为了练习KMP算法使用了KMP算法. 代码如下: ...
- Jquery ajax方法详解
1.url: 要求为string类型的参数,(默认为当前页面地址)发送请求的地址. 2.type: 要求为String类型的参数,请方式(get/post)默认为get.注意其他HTTP请求方法,例如 ...
- AFNetworking 保存Cookie Session 和 Webview 共享Cookie
1, 请求并携带SessionId, 代码如下: //当请求成共后调用如下代码, 保存Cookie NSArray *cookies = [[NSHTTPCookieStorage sharedHTT ...
- javascript 简单实现对两个数组相似度的检验
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- ISO C Random Number Functions
This section describes the random number functions that are part of the ISO C standard. To use these ...
- 在线QQ客服
代码一: <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=451314789&si ...
- CImage类的介绍与使用
CImage类的介绍与使用 程序代码下载处:http://download.csdn.net/source/2098910 下载处:http://hi.baidu.com/wangleitongxin ...
- Ubuntu 12.04 安装JDK 8和Eclipse
Ubuntu 12.04 下安装 JDK8 方法一:(缺点是安装时附加openjdk等大量程序并无法去除,长处是安装简单) $ sudo apt-get install eclipse 方法二:(长处 ...
- 隐式意图-activity
Intent intent = new Intent(); intent.setAction(Intent.ACTION_VIEW);//设置动作 intent.setData(Uri.parse(& ...