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 ...
随机推荐
- Buy Tickets(线段树)
Buy Tickets Time Limit: 4000MS Memory Limit: 65536K Total Submissions: 16607 Accepted: 8275 Desc ...
- zzuli生化危机(dfs)
生化危机 Time Limit: 1 Sec Memory Limit: 128 MB Submit: 73 Solved: 21SubmitStatusWeb Board Description ...
- javascript实现模仿迅雷电影评分
效果图: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- ThinkPHP - 自定义标签库 - 标签驱动
ThinkPHP 官方文档:http://document.thinkphp.cn/manual_3_2/taglib_driver.html 创建一个类,继承自TagLib类: <?php / ...
- AFNetworking 3.0x版本最新特性
AFNetworking是一款在OS X和iOS下都令人喜爱的网络库.为了迎合iOS新版本的升级, AFNetworking在3.0版本中删除了基于 NSURLConnection API的所有支持. ...
- JavaScript弹出框
confirm(str); 参数说明: str:在消息对话框中要显示的文本 返回值: Boolean值 返回值: 当用户点击"确定"按钮时,返回true 当用户点击"取消 ...
- 基于Sql Server 2008的分布式数据库的实践(五)
原文 基于Sql Server 2008的分布式数据库的实践(五) 程序设计 ------------------------------------------------------------- ...
- 数论(容斥原理)hdu-4509-The Boss on Mars
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4059 题目大意: 给一个n,求1~n中与n互质的数的4次方的总和. 解题思路: 容斥原理.逆元.公式 ...
- Zabbix Step 1 : Install CentOS6.5 and Configration
[root@myzabbix Desktop]#rpm -ivh http://repo.zabbix.com/zabbix/2.2/rhel/6/x86_64/zabbix-release-2.2- ...
- xp每天定时关机命令
at 00:00 /every:M,T,W,Th,F,S,Su shutdown -s -t 120 能够把00:00改成你想要每天定时关机的时间,120是指关机倒计时的秒数,也能够更改 M,T,W, ...