Easyui之ComboBox下拉列表组

最新推荐文章于 2023-11-22 16:31:02 发布
最新推荐文章于 2023-11-22 16:31:02 发布
阅读量539 收藏
点赞数
分类专栏： easyui easyui之comobox组件 文章标签： jQuery EasyUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45464930/article/details/107051078
版权

ComboBox组件

前言

今天为大家分享的是Easyui中的Comobox组件，下拉列表组的实现方式！

属性

首先来展示一下comobox组件中的一些属性、事件、以及方法吧~

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

事件

在这里插入图片描述

方法

在这里插入图片描述
当然，这些ComoBox的属性、方法、事件都是从Combo组件中拓展而来的，所以不仅有Combo的属性、还有ComboBox组件的属性！

案例演示

博主还是喜欢按照这个固定的套路来吧，分为两种方式：

1、静态html实现

在这里插入图片描述
这种方式一般不通用的，所以我通常都使用动态的方式去获取数据！

代码展示：

jsp页面需要必须引入css、js样式：

<!-- 写全局样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<!-- 定义图标的样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">   
<!--组件库源文件的js文件-->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>  
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>

首先jsp页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 写全局样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<!-- 定义图标的样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">   
<!--组件库源文件的js文件-->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script
最低0.47元/天 解锁文章
秃头程序汪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
easyui控件之combobox用法。
xugan666的专栏
02-10 1566
easyui的出现确实大大的减少了web开发时间。虽然是免费的。。恩，非商业，那么就将就点用吧。  先写一个combobox下拉列表的用法。。相信很多朋友都会遇见的问题。        下面是绑定方法。 $('#cc').combobox({         url: url,         valueField: 'id',         textField: 'name',
EasyUI之下拉列表框comboBox
sunpy
04-09 937
1.布局 下拉列表框显示一个可编辑文本框和下拉式列表，用户可以选择一个值或多个值。用户可以直接输入文本到列表顶部或选择一个或多个当前列表中的值。 2.练习1：静态方式1生成下拉列表框 comboBox wuhan beijing shanghai guangzhou
easyui下拉列表框
02-14 1035
使用jquery easyui的下拉列表combobox碰上问题，下拉列表的项都是从数据库读出来的，然后我想在动态生成的项中添加一项："&lt;option value=''&gt;=全部=&lt;/option&gt;"。但怎么也添加不成功。首先试了直接用jquery对该下拉列表进行添加操作：$('#selUnin').combobox({        url: _callback_url ...
EASY-UI实现下拉框
最新发布
weixin_51755740的博客
11-22 1254
返回为数组用setValues。
EasyUI学习之Combobox下拉列表(1)
11-29
本文实例为大家分享了EasyUI Combobox下拉列表的具体代码，供大家参考，具体内容如下 1. html代码 性别： <input class="easyui-combobox" style="width: 100px;" type="text" id="gender" /> 2.显示 3.js...
EasyUI学习之Combobox级联下拉列表(2)
08-31
在本文中，我们将深入探讨EasyUI的Combobox级联下拉列表的实现，这是一个非常实用的功能，常用于数据筛选和信息检索。EasyUI是基于jQuery的前端框架，它提供了丰富的UI组件，使得开发者能够快速构建美观且响应式的...
EasyUI中combobox默认值注意事项
09-03
EasyUI的Combobox组件是一个强大的选择项输入控件，它将文本输入框和下拉列表相结合，提供了丰富的功能。然而，在设置默认值时，如果不注意一些细节，可能会导致预期效果无法实现。以下是对`EasyUI combobox`默认值...
EasyUI combobox下拉框
ericlee1994的博客
07-31 802
作为一个新手，最近再改别人的代码 心情很差 先吐槽一下 大家谅解 easyui中大体可以分为两种combobox下拉框 1.在DOM中写的，如图（图来自easyui文档） 2.在js中写，如图（图来自easyui文档） 我改的这个项目中，他把combobox写在DOM中了，这个下拉框里的内容是动态的，我添加了新的内容再点下拉框，下拉框里没有我新建的。反复测试发现只有在jsp第一...
easyui的下拉框多选
06-15
easyui的下拉框多选
easyui中combobox后台交互实例
11-18
easyui中combobox后台交互实例
EasyUI实现下拉列表补全以及数据关联功能
wilson_m的博客
06-03 1638
最近在开发项目的时候，使用EasyUI框架，实现下拉列表自动选取或者自动补全的功能，同时也要对数据进行关联，也就是联动，类似于省市县的功能，选择省份，出现对应的市。 一、下拉别表补全功能 &amp;lt;input class=&quot;easyui-combobox&quot; name=&quot;earId&quot; style=&quot;width:90%&quot; data-options=&
EasyUI从数据库获取数据填充下拉框
阳光丶不锈
07-27 4975
EasyUI从数据库获取数据填充下拉框 这里引用一个简单的小DEMO来演示一下 JSP页面 在JSP页面中，添加一个input标签，给标签加上如下属性type:text id : name: class:这里一定要写easyui-combobox data-options=” eaitable(是否可以编辑),valueField:,textField:,url:(请求后台的地址),pro
Easyui下拉菜单，并设置默认值
qq_41373328的博客
03-21 2177
<input class="easyui-combobox" id="workSheetType" name="workSheetType" style="width:150px;height:30px;"> $(function(){ $("#workSheetType").combobox({ url:"${pageContext.request.contextPath...
easyui select combobox 获取下拉选项值
热门推荐
不信成不了大牛的博客
04-19 2万+
<select id="yg_xs" name="yg_xs" class="easyui-combobox" style="width:150px;"                             data-options="required:true">                         请选择                         东阳
EasyUI combobox 加载JSON数据
itmyhome的专栏
06-02 1万+
Action返回 JSON 格式如下： jsonResult = { total=7,rows=[ {TEXT=技术支持, ID=402894ca4419acf1014419b148a10000}, {TEXT=开发部, ID=402894ca4419acf1014419beb1bc0001}, {TEXT=实施, ID=4028e439476b55b
EasyUI Combobox
06-07
EasyUI Combobox 是基于 jQuery 和 EasyUI 的下拉列表组件，它能够帮助开发者快速地创建一个功能强大的下拉列表。 EasyUI Combobox 支持以下特性： 1. 自动完成：根据用户输入的内容，自动匹配下拉列表中的选项，并显示匹配的选项，用户可以从匹配的选项中选择一个或多个。 2. 延迟加载：可以通过 AJAX 动态加载下拉列表的数据，从而避免加载大量数据导致页面卡顿。 3. 多选：支持用户在下拉列表中选择多个选项。 4. 数据筛选：可以通过输入关键字来搜索下拉列表中的选项，从而快速筛选出符合条件的选项。 5. 自定义显示：支持自定义下拉列表中每个选项的显示方式，包括图标、文本、HTML 等。 6. 事件处理：支持 onChange、onSelect 和 onClick 事件处理，开发者可以根据自己的需求来实现相应的逻辑。 EasyUI Combobox 的使用非常简单，只需引入相关的 JS 和 CSS 文件，并在 HTML 页面中创建一个容器元素，然后在 JavaScript 中进行初始化即可。例如： ```html <head> <link rel="stylesheet" type="text/css" href="jquery.easyui.css"> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.easyui.min.js"></script> </head> <body> <input id="cc" class="easyui-combobox" data-options="valueField:'id',textField:'name',url:'data.php'"> </body> <script> $('#cc').combobox(); </script> ``` 以上代码中，通过设置 data-options 属性来指定 EasyUI Combobox 的配置，然后在 JavaScript 中调用 combobox() 方法来初始化即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值