一、easyUI中select下拉框动态添加option选项

　　问题：想在combobox的下拉项里动态添加一些内容，但是添加不成功。因为jquery easyui的下拉列表combobox是用DIV模拟的（其实看看它的样式就应该想到）

　　解决方法：

　　1、一个空下拉框，注意不能加class="easyui-combobox"，否则不生效

<select class="timeJ " id="selectInfo1" panelheight="auto" editable="false" style="width:220px;">

</select>

//注意class不能加easyui-combobox

　　2、为下拉框添加子项：利用文档碎片

var fragment = document.createDocumentFragment();

for(var i=;i<;i++){

    var option = document.createElement("option");

    option.innerHTML = i + "点";

    $(option).attr("value",i);

    fragment.appendChild(option);

}

$("#selectInfo1").append(fragment);

$("#selectInfo1").combobox({});

　　3、将下拉框转化为easyUI中的combobox

$("#selectInfo1").combobox({});

　　只要填充好数据，再去转化那就可以了。

二、Combobox用法和方法参数：

1、 需要引入class=" easyui-combobox”

2、 参数设置需要在data-options中设置

3、 属性参数配置：

valueField：基础数据值名称绑定到Combobox(提交值)

textField：基础数据的字段名称绑定的Combobox（显示值）

mode:定义当文本改变时如何加载列表数据，当设置为remote模式下，什么类型的用户将被发送http请求参数名为'q'的服务器，以获取新的数据。

url：从远程URL来加载列表数据

method：http方法检索列表数据

data：列表中被加载的数据

filter：定义如何过滤本地数据“模式”设置为'local'

formatter：定义如何呈现行

loader：定义如何从远程服务器加载数据

常用属性：

 <td>

   <select id="usbLabel" class="easyui-combobox"  name="labelList" style="width:285px;" panelHeight="150px" panelWidth="285px" editable="false">

       <s:iterator value="#request.labelList" var="list"><option value="<s:property  value="#list.name" />"><s:property  value="#list.name" /></option></s:iterator>

   </select>

   <label class="requiredLable">*</label>

</td>

//style：设置宽度样式之类

//panelWidth：设置下拉面板宽度

//panelHeight：设置下拉面板高度

4、 事件：

onBeforeLoad(param): 操作之前将数据加载，返回false就取消这个荷载作用

onLoadSuccess():触发时，远程数据加载成功

onLoadError：触发时，远程数据加载错误

ONSELECT：触发，当用户选择一个列表项

onUnselect：触发，当用户取消选择一个列表
5、方法：

options()：返回选择对象

getData():返回加载的数据

loadData(data):加载列表数据

reload(url):重新加载远程数据列表

setValues(values):设置combobox的值数组

setValue(value):设置combobox的值

clear():清空combobox的值

select(value):选中指定的值

unselect(value):取消指定的值

代码实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>combobox</title>

<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="themes/icon.css">

<script type="text/JavaScript" src="jQuery-1.7.2.min.js"></script>

<script type="text/javascript" src="jquery.easyui.min.js"></script>

<script type="text/javascript">

//动态加载数据集文件数据

function loadData(){

    $('#cc').combobox({

        url:'combobox_data.json',

        valueField:'id',

        textField:'text'

    });

}

//设置下拉框的值

function setValue(){

    $("#cc").combobox("setValue","动态添加的列表值");

}

//获取当前选择的值

function getValue(){

    var selectText=$("#cc").combobox("getValue");

    alert("当前选择的是:"+selectText);

}

//禁用当前选择框

function disable(){

    $("#cc").combobox("disable");

}

//启用当前选择框

function enable(){

    $("#cc").combobox("enable");

}

$('#cc1').combobox({

    filter: function(q, row){

        var opts = $(this).combobox('options');

        return row[opts.textField].indexOf(q) == ;

    },

    formatter: function(row){

        var opts = $(this).combobox('options');

        return row[opts.textField];

    }

});

</script>

</head>

<body>

<h2>ComboBox</h2>

<div style="margin:10px 0;">

<a href="#" class="easyui-linkbutton" onclick="loadData()">LoadData</a>

<a href="#" class="easyui-linkbutton" onclick="setValue()">SetValue</a>

<a href="#" class="easyui-linkbutton" onclick="getValue()">GetValue</a>

<a href="#" class="easyui-linkbutton" onclick="disable()">Disable</a>

<a href="#" class="easyui-linkbutton" onclick="enable()">Enable</a>

</div>

<p>单项选择的ComboBox: </p>

<select id="cc" class="easyui-combobox" name="state" style="width:200px;" data-options="required:true,width:150">

<option value="AL">Alabama</option>

<option value="NC">North Carolina</option>

<option value="ND">North Dakota</option>

<option value="OH" selected>Ohio</option>

<option value="OK">Oklahoma</option>

<option value="OR">Oregon</option>

</select>

<br/>

<p>本地数据源的Combobox</p>

<input class="easyui-combobox" id="cc1"

    data-options="valueField:'lable',textField:'value',

    data:[{

                lable:'Java',

                value:'java'

            },

            {

                lable:'liferay',

                value:'liferay'

            },

            {

                lable:'jiar',

                value:'jiar'

            },

            {

                lable:'ruby',

                value:'ruby'

            }

        ]"/>

<br />

<p>来源网页数据的Combobox</p>

<input class="easyui-combobox" id="cc2"

    data-options=" valueField: 'id', textField: 'text',url: 'get_data1.PHP',

    onSelect: function(rec){

            var url = 'get_data2.php?id='+rec.id;

            $('#cc3').combobox('reload', url);

        }" />

<input id="cc3" class="easyui-combobox" data-options="valueField:'id',textField:'text'" />

<br/>

<p>多项选择的ComboBox: </p>

<select id="cc4" class="easyui-combobox" name="state" style="width:200px;"

    data-options="url:'combobox_data.json',

        valueField:'id',

        textField:'text',

        multiple:true,

        panelHeight:'auto'

        "/>

</body>

</html>

EasyUI中combobox的使用方法和一个代码实例的更多相关文章

  1. jquery easyUI中combobox的使用总结

    jquery easyUI中combobox的使用总结 一.如何让jquery-easyui的combobox像select那样不可编辑?为combobox添加editable属性 设置为false ...

  2. EasyUI 中 Combobox里的onChange和onSelect事件的区别

    EasyUI 中 Combobox 选项发生改变时会触发 onChange,onSelect,onClick 3 个事件. 最近要做一个级联的 Combo 菜单,类似于选择地址时让用户填写省,市,区的 ...

  3. 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具

    查看本章节 查看作业目录 需求说明: 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具 实现思路: 使用history对象中的 forward() 方法和 ...

  4. easyui中combobox的值改变onchang事件

    今天在公司里,那jquery中的easy-ui-里面的combobox,真的郁闷死了! 把郁闷的事情记下来,下次就不会犯错了! 首先,肯定少不了,引入jquery的js文件!请大家注意了! 下面是代码 ...

  5. 【JOB】Oracle中JOB的创建方法以及一个细节的探究

    在Oracle中可以使用JOB来实现一些任务的自动化执行,类似于UNIX操作系统crontab命令的功能.简单演示一下,供参考. 1.创建表T,包含一个X字段,定义为日期类型,方便后面的定时任务测试. ...

  6. EasyUi 中datagrid 实现查询方法

    1.在初始化表格方法中添加传入參数,例如以下: //初始化表格 function initTable(<strong><span style="color:#ff6666; ...

  7. EasyUI中, datagrid用loadData方法绑定数据。

    $("#dg").datagrid("loadData", { , " }, { "ck": "1", &qu ...

  8. easyui中combobox 验证输入的值必须为选项框中的数据

    当作为提示框的方式时,combobox必须设置为允许用户输入的模式,但是当用户输入后未选择正确的数据就直接按tab或点击鼠标离开控件会导致用户输入无效的值并且通过验证,为了避免这种情况的发生我们需要对 ...

  9. EasyUI中combobox的代码实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 不要62 hdu 2089 dfs记忆化搜索

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=2089 题意: 给你两个数作为一个闭区间的端点,求出该区间中不包含数字4和62的数的个数 思路: 数位dp中 ...

  2. Alter GDG limit

    //JOBCARD... //*-------------------------------------------------------------------* //* Alter GDG l ...

  3. 冒泡排序之Java实现

    冒泡排序之Java实现 一.方法一 package cn.com.zfc.lesson21.sort; import java.util.Arrays; /** * * @title BubbleSo ...

  4. [51Nod 1773] A国的贸易

    [51Nod 1773] A国的贸易 题目描述 A国是一个神奇的国家. 这个国家有 2n 个城市,每个城市都有一个独一无二的编号 ,编号范围为0~2n-1. A国的神奇体现在,他们有着神奇的贸易规则. ...

  5. CF1060C Maximum Subrectangle【乘法分配律】【最大子矩阵】

    CF1060C Maximum Subrectangle 题意翻译 现在给出一个长度为N的a数列,一个长度为M的b数列. 现在需要构造出一个矩阵c,其中ci,j​=ai​×bj​.再给出一个x,请在矩 ...

  6. python开发_tkinter_自己做的猜数字小程序

    读到这篇文章[python 3.3下结合tkinter做的猜数字程序]的时候,就复制了代码,在自己机器上面跑了一下 源程序存在一个缺陷: 即当用户答对了以后,用户再点击'猜'按钮,最上面的提示标签还会 ...

  7. Codeforces Round #297 (Div. 2)A. Vitaliy and Pie 水题

    Codeforces Round #297 (Div. 2)A. Vitaliy and Pie Time Limit: 2 Sec  Memory Limit: 256 MBSubmit: xxx  ...

  8. ZOJ 3622 Magic Number 打表找规律

    A - Magic Number Time Limit:2000MS     Memory Limit:32768KB     64bit IO Format:%lld & %llu Subm ...

  9. Alpha冲刺(4/10)——追光的人

    1.队友信息 队员学号 队员博客 221600219 小墨 https://www.cnblogs.com/hengyumo/ 221600240 真·大能猫 https://www.cnblogs. ...

  10. Java学习笔记_22_Set接口的实现类

    22.Set接口的实现类: Set接口存放的元素是无序的且不包括反复元素. 1>实现类HashSet: HashSet类依据元素的哈希码进行存放,取出时也能够依据哈希码高速找到.HashSet不 ...