easyui-combobox

    在做功能的时候用到easyui的combobox,下拉框经常使用,因此把它的使用方法简单总结如下:

    html代码部分:

<pre name="code" class="html"><select class="easyui-combobox" id="fruit" 
        data-options="editable:false"
	style="height: 25px; width: 148px"
	align="center" > 
    <option value="banana">香蕉</option>
    <option value="orange">橘子</option>
    <option value="apple">苹果</option>
</select>
 

    1、combobox改变选中值触发事件:

    onSelect事件:

$().ready(function(){ 
	$("#fruit").combobox({
		editable : false, // 不可编辑状态
		cache : false,
		panelHeight : '150',// 自动高度适合
		onSelect : function() {
		//改变选中值后的操作...
		}
	})
});

    或者onChange事件;

$('#fruit').combobox({
    onChange:function(newValue,oldValue){
        alert(newValue);
    }
});


    2、combobox设置默认选中项

$('#fruit').combobox('select',"苹果");

    3、combobox获取选中项的value值:

$("#fruit").combobox("getValue");

    4、combobox获取选中项的text值:

$("#fruit").combobox("getText");

    5、combobox设置不可用

$('#fruit').combobox('disable');   //设置不可用


小结:

    常用easyui样式不仅基本使用要会,与其他样式组合使用也要会。

    多看官网,高效、原汁原味。

### 如何使用 EasyUI Combobox 组件 #### 设置不可编辑的 Combobox 通过设置 `editable` 属性为 `false`,可以实现组合框无法手动输入的功能。可以通过 HTML 的属性定义或者 JavaScript 初始化来完成此操作。 HTML 定义方式如下所示: ```html <select class="easyui-combobox" data-options="width:400, editable:false"> <option>苹果</option> <option>葡萄</option> </select> ``` JavaScript 动态初始化方式如下所示: ```javascript $('.easyui-combobox').combobox({ editable: false }); ``` 以上两种方法都可以使组合框变为只读模式[^1]。 #### 获取 Combobox 值的方法 EasyUI 提供了多种获取 Combobox 中选定值的方式。主要分为两类:`getValue()` 和 `getText()` 方法。具体的选择取决于开发者在 `data-options` 中对组件的具体配置需求[^2]。 - 使用 `getValue()` 可以返回当前选中项对应的值字段。 - 使用 `getText()` 则会返回显示给用户的文本字段。 示例代码如下: ```javascript var selectedValue = $('#myComboBox').combobox('getValue'); // 返回值字段 var selectedText = $('#myComboBox').combobox('getText'); // 返回文本字段 ``` #### 加载 JSON 数据到 Combobox 为了动态加载远程数据源的内容至 Combobox,可以利用 URL 参数指定数据接口地址,并分别指明用于存储值和文本的字段名。 以下是官方文档推荐的一个实例: ```javascript $('#cc').combobox({ url: 'combobox_data.json', valueField: 'id', // 对应于 JSON 数据中的键名作为实际值 textField: 'text' // 显示给用户的文本部分对应的数据键名 }); ``` 该片段展示了如何从服务器端请求 JSON 格式的选项列表并绑定到控件上[^3]。 #### 实现全模糊查询功能 默认情况下,EasyUICombobox 支持的是右侧模糊匹配机制,即只有当用户输入字符串位于目标条目末端附近时才会被筛选出来;然而,在某些场景下可能需要更灵活的查找逻辑——比如允许任何位置上的子串匹配(即所谓的“全模糊”)。针对这一需求,网络上有两种主流解决方案可供参考[^4]: 一种思路是对原生过滤算法进行扩展定制化处理; 另一种则是借助第三方插件库增强原有特性集。 ---
评论 38
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值