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 ...
随机推荐
- jxl读写excel, poi读写excel,word, 读取Excel数据到MySQL
这篇blog是介绍: 1. java中的poi技术读取Excel数据,然后保存到MySQL数据中. 2. jxl读写excel 你也可以在 : java的poi技术读取和导入Excel了解到写入Exc ...
- Eclipse 取消import自动补全具体的类名
有时候,在代码里写了一个JFrame,然后Eclipse就自动添加了import javax.swing.JFrame; 但有时候希望只要import javax.swing.*;就可以了,不希望具体 ...
- CentOS配置防火墙
昨天帮朋友配置CentOSserver,一開始为了方便測试直接把防火墙关了.之后便须要配置好防火墙,网上找了几个防火墙规则都有错误,后来发现是博主发帖不认真,有太多字符错误,以下是我整理的亲測可用的防 ...
- JavaScript 高级程序设计(第3版)笔记——chapter5:引用类型
Chapter5 引用类型 本章内容: l 使用对象 l 创建并操作数组 l 理解基本的JavaScript类型 l 使用基本类型和基本包装类型 l 从技术上讲,JavaScript是一门面 ...
- A - Prime Ring Problem(素数环,深搜,打表)
Description A ring is compose of n circles as shown in diagram. Put natural number 1, 2, ..., n into ...
- C#构架之基础学习----动态添加窗体和 控件
仿照窗体应用程序编写: 任务一:生成一个Form类的窗体对象frm using System.Windows.Forms; //using指令使用Form对象创建所需的命名空间 //如 ...
- HDU 3932 Groundhog Build Home 【基础模拟退火】
和刚才那道是一模一样 不过求的是最小的,只要稍微修改一下就可以了~ //#pragma comment(linker, "/STACK:16777216") //for c++ C ...
- HDOJ 3635 并查集- 路径压缩,带秩合并
思路来源:http://blog.csdn.net/niushuai666/article/details/6990421 题目大意: 初始时,有n个龙珠,编号从1到n,分别对应的放在编号从1到n的城 ...
- php 针对特殊字符进行转义
1.addslashes() 使用反斜线引用字符串 和 stripslashes()反引用一个引用字符串 2.htmlentities():转化为html实体 和html_entity_decode( ...
- PAD会取代PC吗
公司上了新的内部管理系统,上线一片混乱,群里也很热闹,从系统是否应该支持pad谈起 ,有技术大佬说5年内就是pad时代了,pad将完全取代pc.我不知道大佬从何得出这个结论,有和数据支撑.我的观点是, ...