-自定义下拉组件,有别于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组件的更多相关文章

  1. 表单(上)EasyUI Form 表单、EasyUI Validatebox 验证框、EasyUI Combobox 组合框、EasyUI Combo 组合、EasyUI Combotree 组合树

    EasyUI Form 表单 通过 $.fn.form.defaults 重写默认的 defaults. 表单(form)提供多种方法来执行带有表单字段的动作,比如 ajax 提交.加载.清除,等等. ...

  2. Easyui主要组件用法

    Easyui主要组件用法说明: 1.  combogrid用法 说明:combogrid可提供翻页列表的数据选择并可进行数据的过滤查询(查询的传人参数为q,可在控制器中获取这个参数传过来的值,下面的示 ...

  3. Easyui部分组件讲解

    Easyui部分组件讲解 目  录 1.... Accordion(可折叠标签)... 2 1.1          实例... 2 1.2          参数... 3 2.... DateBo ...

  4. 对easyui datagrid组件的一个小改进

    #对easyui datagrid组件的一个小改进 ##问题 在实际项目中使用datagrid时,受版面限制,有时候表格不能太大,这时候表格里面的内容就不能完全显示,用户需要经常拖动调整列宽才能看完整 ...

  5. easyUI panel组件

    easyUI panel组件: 属性的使用: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  6. easyUI progressbar组件

    easyUI progressbar组件: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  7. easyUI linkbutton组件

    easyUI linkbutton组件: <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  8. easyUI tootip组件使用

    easyUI tootip组件使用: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  9. easyUI resizable组件使用

    easyUI resizable组件使用: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

随机推荐

  1. jxl读写excel, poi读写excel,word, 读取Excel数据到MySQL

    这篇blog是介绍: 1. java中的poi技术读取Excel数据,然后保存到MySQL数据中. 2. jxl读写excel 你也可以在 : java的poi技术读取和导入Excel了解到写入Exc ...

  2. Eclipse 取消import自动补全具体的类名

    有时候,在代码里写了一个JFrame,然后Eclipse就自动添加了import javax.swing.JFrame; 但有时候希望只要import javax.swing.*;就可以了,不希望具体 ...

  3. CentOS配置防火墙

    昨天帮朋友配置CentOSserver,一開始为了方便測试直接把防火墙关了.之后便须要配置好防火墙,网上找了几个防火墙规则都有错误,后来发现是博主发帖不认真,有太多字符错误,以下是我整理的亲測可用的防 ...

  4. JavaScript 高级程序设计(第3版)笔记——chapter5:引用类型

    Chapter5 引用类型 本章内容: l  使用对象 l  创建并操作数组 l  理解基本的JavaScript类型 l  使用基本类型和基本包装类型 l  从技术上讲,JavaScript是一门面 ...

  5. A - Prime Ring Problem(素数环,深搜,打表)

    Description A ring is compose of n circles as shown in diagram. Put natural number 1, 2, ..., n into ...

  6. C#构架之基础学习----动态添加窗体和 控件

    仿照窗体应用程序编写: 任务一:生成一个Form类的窗体对象frm using System.Windows.Forms;         //using指令使用Form对象创建所需的命名空间 //如 ...

  7. HDU 3932 Groundhog Build Home 【基础模拟退火】

    和刚才那道是一模一样 不过求的是最小的,只要稍微修改一下就可以了~ //#pragma comment(linker, "/STACK:16777216") //for c++ C ...

  8. HDOJ 3635 并查集- 路径压缩,带秩合并

    思路来源:http://blog.csdn.net/niushuai666/article/details/6990421 题目大意: 初始时,有n个龙珠,编号从1到n,分别对应的放在编号从1到n的城 ...

  9. php 针对特殊字符进行转义

    1.addslashes() 使用反斜线引用字符串 和 stripslashes()反引用一个引用字符串 2.htmlentities():转化为html实体 和html_entity_decode( ...

  10. PAD会取代PC吗

    公司上了新的内部管理系统,上线一片混乱,群里也很热闹,从系统是否应该支持pad谈起 ,有技术大佬说5年内就是pad时代了,pad将完全取代pc.我不知道大佬从何得出这个结论,有和数据支撑.我的观点是, ...