-自定义下拉组件,有别于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. More Divisors(反素数)

    More Divisors Time Limit: 2 Seconds      Memory Limit: 65536 KB Everybody knows that we use decimal ...

  2. HDU 4720 Naive and Silly Muggles (外切圆心)

    Naive and Silly Muggles Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...

  3. LNK 2005 error 函数定义也是定义!!

    url=Ccne-rWwUO9tJp5YAPcycUw09__2whgZLpLw2aWVuYuE-fhu46kaVNX4BldWlsxig1tDML47aO_ctD3PcUlGjK"> ...

  4. Oracle Licensing

    Oracle根据什么来计算License的? Unlimited License Agreements Unlimited License Agreements通常简称ULA,表示在一个固定期限内(2 ...

  5. 《数据通信与网络》笔记--虚电路网络:帧中继和ATM

    在之前的文章中已经介绍过虚电路交换,详细请参见:http://blog.csdn.net/todd911/article/details/9069447 这边介绍下使用虚电路交换的2中WAN技术:帧中 ...

  6. c,c++,java格式总结

    c语言 java

  7. D - 二叉树遍历(推荐)

    二叉树遍历问题 Description   Tree Recovery Little Valentine liked playing with binary trees very much. Her ...

  8. [Swust 549]--变位词(vector水过)

    Time limit(ms): 1000 Memory limit(kb): 65535   Description 输入N和一个要查找的字符串,以下有N个字符串,我们需要找出其中的所有待查找字符串的 ...

  9. Android中的TextView实现多行显示省略号

    今天遇到一个问题就是TextView显示内容的时候,多行显示的时候,显示省略号的问题,刚开始没有找到一个好的办法,只找到一个自定义TextView组件的方法,然而今天在贴吧中找到一个更好,更简便的方法 ...

  10. c语言memset详解

    void *memset(void *s, int ch, size_t n);(int ch可以是char或int) 将s所指向的某一块内存中的每个字节的内容全部设置为ch指定的ASCII值, 块的 ...