-自定义下拉组件,有别于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. MFC内部结构剖析

    //////////////////////////////////////////////////////////////////////////////////////////MFC程序的执行顺序 ...

  2. HDU 4825 Xor Sum 字典树+位运算

    点击打开链接 Xor Sum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 132768/132768 K (Java/Others) ...

  3. [Swust OJ 1084]--Mzx0821月赛系列之情书(双线程dp)

    题目链接:http://acm.swust.edu.cn/problem/1084/ Time limit(ms): 1000 Memory limit(kb): 65535   Descriptio ...

  4. BZOJ 2718: [Violet 4]毕业旅行( 最长反链 )

    一不小心速度就成了#1.... 这道题显然是求最长反链, 最长反链=最小链覆盖.最小链覆盖就是先做一次floyd传递闭包, 再求最小路径覆盖. 最小路径覆盖=N - 二分图最大匹配. 所以把所有点拆成 ...

  5. POJ 3384 Feng Shui 凸包直径 + 半平面交

    G++一直没有过了 换成 C++果断A掉了...It's time to bet RP. 题意:给一个多边形,然后放进去两个圆,让两个圆的覆盖面积尽量最大,输出两个圆心的坐标. 思路:将多边形的边向里 ...

  6. 利用CentOS系统IPtables防火墙添加网站IP白名单

    参考博文: 利用CentOS系统IPtables防火墙添加360网站卫士节点IP白名单 centos6.5添加白名单如下: 在防火墙 配置文件中加入白名单  ip -A INPUT -s 183.13 ...

  7. ZOJ 3203 Light Bulb - 求导求最大值

    如果L全在地面上: 输出 h * D / H 如果L全在墙上: 输出 h 否则: (D - X ) / X = Y / (H - h) L = D - X + h - Y 然后对L求导即可 #incl ...

  8. django1.6读书笔记一

    reporter是Article中的一个外键,我们可以有多篇文章指向同一个reporter,然后通过使用article_set.all()就可以返回其所有的headline了,也可以添加条件来筛选. ...

  9. Ubuntu无法进入图形界面及VirtualBox扩容的解决方案

    升级Ubuntu 12.04后出现“Ubuntu is running in low-graphics mode?”,无法进入图形界面,而且给了一些选项,发现其他几个都没有用,最终只能使用low-gr ...

  10. div无法触发blur事件解决的方法

    默认情况下div无法获取焦点,无法触发focus与blur事件,推測span,a等标签也无法触发焦点事件(input:button.及button标签能够触发) 怎样使div触发blur事件:能够给d ...