-自定义下拉组件,有别于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. 开启Linux VNC远程桌面

    Xwindows:gnome (红帽默认安装的图形界面)   一, 确认及安装VNCSERVER. 1,首先确认你服务器是否配置了VNCSERVER,可以在命令行下敲入以下命令查看: [root@lo ...

  2. akka actor 的request-response简单实现

    注:本文章是看blog后的一个阶段小结,只作为个人笔记, 原文链接:http://www.iteblog.com/archives/1154 官网地址贴上:http://doc.akka.io/doc ...

  3. VMware-Workstation安装在ubuntu15.04(内核3.19)

    安装的最新版的linux15.04 安装VMware-Workstation11,运行gui程序的时候出现,VMware Kernel Module Update的提示窗口, 说是要更新vmnet-d ...

  4. Android 中 GridView 常用属性合集

    GridView的一些常用属性: android:numColumns=”auto_fit” //GridView的列数设置为自动 android:columnWidth=”90dp " / ...

  5. Ural 1319 - Hotel

       You programmers are lucky! You don't have to deal with these terrible people – designers… This st ...

  6. Ubuntu服务器上SSH Server 的安装和设置

    网上有很多介绍在Ubuntu下开启SSH服务的文章,但大多数介绍的方法测试后都不太理想,均不能实现远程登录到Ubuntu上,最后分析原因是都没有真正开启ssh-server服务.最终成功的方法如下: ...

  7. ascii码所有字符对照表(包含汉字和外国文字)

    http://www.0xaa55.com/thread-398-1-1.html看到了0xaa55的这个帖子,想起了2年前我在51cto发的一个帖子http://down.51cto.com/dat ...

  8. PHP 重载 __call() _callStatic方法

    在C++和java中,可以函数参数的个数或类型来进行重载.但php是弱类型的语言,无法采用传统的方法.若下面这样: class Person{ function fun1($a) { echo 'fu ...

  9. ThinkPHP 3.1.2 URL<1>

    # # ThinkPHP 3.1.2 URL 本节课大纲: 一.URL规则 1.默认是区分大小写的 2.如果我们不想区分大小写可以改配置文件 'URL_CASE_INSENSITIVE'=>tr ...

  10. 正则表达式验证数字、汉字、电话号码,email,整数,浮点数

    验证数字的正则表达式集 验证数字:^[0-9]*$验证n位的数字:^\d{n}$验证至少n位数字:^\d{n,}$验证m-n位的数字:^\d{m,n}$验证零和非零开头的数字:^(0|[1-9][0- ...