jQuery+easyui中的combobox实现下拉框特效

1.第一种写法：Input框中显示：

代码如下:

<input id="cc" class="easyui-combobox" name="name" data-options="valueField:'value',textField:'text',data:[{'value':'1','text':'java'},{'value':'2','text':'C#'}]"/>

2. 第二种用法，在list列表中显示：

代码如下:

<th data-options="field:'lb',editor:{type:'combobox',options:{data:[{'value':'1','text':'java'},{'value':'2','text':'C#'}],valueField:'value',textField:'text'}}">类别</th>

3. 第二种的另一种写法：

代码如下:

<th field="level" editor="{  
    type:'combobox',   
    options:{ 
        data:[   
            {'value':'1','text':'java'}, 
            {'value':'2','text':'C#'} 
        ], 
    valueField:'id',   
    textField:'text'}}">   
    类别</th>

以上3种方法均可实现jQuery.easyui的下拉框特效，大家自由选择，希望小伙伴们能够喜欢

赞 (0)

相关推荐

  • Extjs中ComboBoxTree实现的下拉框树效果(自写)

    Extjs中ComboBoxTree实现的下拉框树效果(自写)

    最近涉及到的一个项目中,需要实现ComboBoxTree的效果,首先,看看效果吧--  在Extjs中是没有这种效果的,所以得自己写,在网络上看了看别人的资料,自己再总结了一下,修改了一下,代码如下: 复制代码 代码如下: Ext.ux.TreeCombo = Ext.extend(Ext.form.ComboBox, { constructor: function (cfg) { cfg = cfg || {}; Ext.ux.TreeCombo.superclass.constructor.

  • WinForm实现为ComboBox绑定数据源并提供下拉提示功能

    WinForm实现为ComboBox绑定数据源并提供下拉提示功能

    本文实例展示了WinForm实现为ComboBox绑定数据源并提供下拉提示功能,这是一个非常有实用价值的功能,具体实现方法如下: 主要功能代码如下: /// <summary> /// 为ComboBox绑定数据源并提供下拉提示 /// </summary> /// <typeparam name="T">泛型</typeparam> /// <param name="combox">ComboBox<

  • Ext中下拉列表ComboBox组件store数据格式用法介绍

    复制代码 代码如下: var p_years = new Ext.form.ComboBox( { fieldLabel : '统计年份', anchor : anchor_w, mode : 'remote', maxHeight:100, triggerAction : 'all', selectOnFocus : true, forceSelection : true, editable : false, //store :[['11', '2011'], ['12', '2012'],[

  • jquery插件 autoComboBox 下拉框

    问: 1.大家在做省市区下拉框联动,或者是产品分类联动,或者是部门联动等下拉框时怎么做? 是用ajaxpro.dll 还是jquery ajax呢?? 答: 是,留下继续阅读. 否,跟帖回复你的方法 结论:每次重复劳动 重复创造联动的下拉框, 累,想死!! 读完本文 您也许可以找到更好的方法来实现 无限级(理论) 的联动下拉框,也许只要10秒钟就够了. 就这样,一个自动产生联动下拉框的插件诞生了... 本插件依赖于jquery1.4.2 最低版本自行测试. 废话完毕. 代码: <div clas

  • ComboBox（下拉列表框）通过url加载调用远程数据的方法

    ComboBox(下拉列表框) ComboBox(下拉列表框)常用属性: valueField: 基础数据值名称绑定到该下拉列表框.- 提交值 textField:基础数据字段名称绑定到该下拉列表框.-显示值 url:通过URL加载远程列表数据. mode:定义了当文本改变时如何读取列表数据.设置为'remote'时,下拉列表框将会从服务器加载数据.当设置为"remote"模式时,用户输入将被发送到名为'q'的HTTP请求参数到服务器检索新数据. 方法: clear:清除下拉列表框的值

  • c#构造ColorComboBox(颜色下拉框)

    复制代码 代码如下: class ColorComboBox : ComboBox    {        /// <summary>        /// 当前选中色        /// </summary>        public Color SelectedColor        {            get { return Color.FromName(this.Text); }        }        /// <summary>     

  • jQuery+easyui中的combobox实现下拉框特效

    1.第一种写法:Input框中显示: 复制代码 代码如下: <input id="cc" class="easyui-combobox" name="name" data-options="valueField:'value',textField:'text',data:[{'value':'1','text':'java'},{'value':'2','text':'C#'}]"/> 2. 第二种用法,在list

  • jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑

    例如"报告交付方式"包含固定交付时,第二个下拉框不可编辑,反之可以编辑,具体代码如下 报告交付方式: <select class="easyui-combobox" panelHeight="auto" style="width:195px" data-options="required:true,valueField:'id',textField:'text' , onSelect:function(){ v

  • 在jquery repeater中添加设置日期,下拉,复选框等控件

    在jquery repeater中添加设置日期,下拉,复选框等控件

    如果, 有不明白的问题, 请先阅读 30 分钟掌握无刷新 Repeater. 示例代码下载: http://zsharedcode.googlecode.com/files/JQueryElementDemo.rar 本文将详细的讲解 Repeater 控件的模板中如何处理控件, 目录如下: * 准备 * html 元素 * 文本框 * 下拉框 * 多行文本框 * 复选框 * jQueryUI 插件 * jQueryUI 日期框 * jQueryUI 按钮 * jQueryUI 自动匹配 示例图

  • jquery仿QQ登录账号选择下拉框效果

    jquery仿QQ登录账号选择下拉框效果

    QQ登录的时候,可以选择以前登录过的账户,这个东西也可以在网站登录的时候用到,所以我就想做一个这样的插件:在网上查了很多,没有找到合适自己的,所以决定自动制作一个. 原理就是一个textbox加一个ul模拟下拉框,用font模拟一个下拉按钮. 一.制作静态效果 先用css和html,做出一个应该有的样子.这里这两个我使用的是字体,可以在icomoon网站上面自己制作.用字体的好处是和输入框定位很方便,而且还可以控制大小颜色等,唯一的不足是IE6和IE7由于不支持:before选择器,导致无法显示

  • 利用Jquery实现可多选的下拉框

    首先下载jquery.multiselect.js 的插件然后复制下列代码,只需改下路径就可以实现可多选下拉框.如果好用还请多多支持! 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://w

  • jquery及原生js获取select下拉框选中的值示例

    现在有一id=test的下拉框,怎么拿到选中的那个值呢? 分别使用javascript原生的方法和jquery方法 复制代码 代码如下: <select id="test" name=""> <option value="1">text1</option> <option value="2">text2</option> </select> 一:javas

  • jQuery+PHP+MySQL实现无限级联下拉框效果

    jQuery+PHP+MySQL实现无限级联下拉框效果

    本文简单实现jQuery无限级联效果,分享给大家供大家参考,具体内容如下  效果图: 图1 仅下拉框 图2 层级提示+下拉框 图3 存储数据点击响应 主要包含3个文件:index.html(主页),wuxianjilian.php(数据处理),wuxianjilian.sql(MySQL数据文件) 1. index.html <html> <head> <title>无限级联</title> <meta http-equiv="Content

  • js和jQuery以及easyui实现对下拉框的指定赋值方法

    js实现: 1. 通过让第i个option为selected实现选中第i个,代码如下:(id为下拉框id) (1) document.getElementById("id").options[i].selected=true; (2)document.getElementById("messagetoid").selectedIndex = 1;(选中第1个option) 2. 通过判别option的value值来实现,代码如下: document.getEleme

  • jQuery扁平化风格下拉框美化插件FancySelect使用指南

    FancySelect是一款小巧实用的jQuery下拉框美化插件.该下拉框美化插件采用扁平化设计风格,是追求时尚的开发者的首选下拉框美化插件之一. 使用方法 HTML结构 FancySelect实用十分简单,它可以和jQuery或Zepto结合使用.在页面中放置一些 <select> 下拉框组件,然后就可以通过 .fancySelect() 方法来调用该下拉框插件.如果下拉框中有某个选项没有值,该插件会使用某种占位文字来代替它. 默认情况下,FancySelect 在 iOS 设备上仅使用原生

随机推荐