EasyUI之下拉列表框comboBox

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

1.布局


下拉列表框显示一个可编辑文本框和下拉式列表，用户可以选择一个值或多个值。用户可以直接输入文本到列表顶部或选择一个或多个当前列表中的值。

2.练习1：静态方式1生成下拉列表框

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>comboBox</title>
<link rel="stylesheet" href="themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="themes/icon.css" type="text/css"></link>
		
<!-- 引入js文件 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
</head>
<body>	
	<select id="cityID" class="easyui-combobox" name="city" style="width:200px;">   
	    <option value="wuhan">wuhan</option>   
	    <option>beijing</option>   
	    <option>shanghai</option>   
	    <option>guangzhou</option>   
	    <option>hangzhou</option>   
	</select> 
</body>
</html>

结果：


3.练习2：静态方式2生成下拉列表框

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>comboBox</title>
<link rel="stylesheet" href="themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="themes/icon.css" type="text/css"></link>
		
<!-- 引入js文件 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
</head>
<body>	
	<input id="cityID" name="city"/>
</body>
	<script type="text/javascript">
		var cityJson =[{"id":1,"text":"wuhan"},{"id":2,"text":"shanghai"},{"id":3,"text":"hangzhou"}];
		$("#cityID").combobox({
			data:cityJson,
			valueField:'id',
			textField:'text'
		});
	</script>
</html>

4.练习3：动态方式生成下拉列表框

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>comboBox</title>
<link rel="stylesheet" href="themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="themes/icon.css" type="text/css"></link>
		
<!-- 引入js文件 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
</head>
<body>	
	<input id="cityID" name="city"/>
</body>
	<script type="text/javascript">
		$("#cityID").combobox({
			url:'json/city.json',
			valueField:'id',
			textField:'text'
		});
	</script>
</html>
结果：


如果以后使用springmvc，则可以使用返回的json串的url接收。


5.文档









sunpy 孙培煜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
EasyUI之下拉框combobox
游海东的技术专栏
10-23 4065
1、实例背景     EasyUI下拉框combobox，实例给出一个日期控件和一个下拉框，选择日期控制下拉框的月份；改变下拉框选项就改变日期的月份。2、实例源码 EasyUI之下拉框combobox $(document).ready(function(){ $("#datePicker").datebox({ onSe
easyUI 构建combox 多选框
伶生的博客
10-21 692
1、不带全选按钮的多选框 /** * 功能：构建下拉多选框 * 参数： * tabId select标签的id * url 传到后台的URL，这个返回的数据一定要是json数据格式 * optionValue 后台数据库视图或表的字段名（这里字段名要全部大写），这个对应的是select标签中保存到数据库的值 * optionText 后台数据库视图或表的字段名（这里字段名要全部大写），这个对应的是select标签中页面展现的值 * create ：fengzj * cr
EasyUI绑定属性下拉框所需的数据格式
08-24
从数据库里查询到的数据通过递归拼接成EasyUI所需要的json格式纯方法代码，有注释
EasyUI combobox下拉多选框的实现
weixin_43853737的博客
11-03 6421
combobox实现下拉列表多选
EasyUI–下拉列表datalist详解
程序员大阳
03-14 1万+
本篇主要介绍下拉列表控件的数据绑定和下拉列表选中项的获取。与下拉框有两点不同，第一是外观上下拉列表会同时显示多个待选项，第二是下拉列表会经常遇到需要多选的情况。之前猫哥自己也没在EasyUI中遇到过使用下拉列表时，同时获取多个选中项的功能，今天写DEMO的时候，只能感觉大约是$("#mydatalist").datalist("getSelectedRows");或者$("#mydatalist")
EasyUI 下拉列表联动
a466318266的博客
10-24 104
//绑定部门、人员下拉菜单项 function BindDdl() { var $ddlbm = $("#ddlBm");//部门下拉列表 var $ddlry = $("#ddlRy");//人员下拉列表 $ddlbm.combobox({ disabled: false, url: '/Home/GetDepar...
easyui--下拉列表
weixin_30764883的博客
08-13 130
普通的combobox： <input id="brandid_C" class="easyui-combobox" name="brandid" data-options="valueField:'value',textField:'text', url:'<%=path %>/controller/c...
EasyUI学习之Combobox级联下拉列表(2)
08-31
这些Comboboxes是相互关联的，当用户在一个下拉列表中选择一个选项时，下一个级别的下拉列表将根据前一选择进行更新，展示与之相关的选项。 1. HTML代码部分展示了Combobox的基本结构。每个输入框都带有`class=...
easyUI combobox实现联动效果
08-31
在 EasyUI 中，Combobox 是一个非常实用的组件，它结合了输入框和下拉列表的功能，用户可以选择已有选项或自行输入。 联动效果是指在一个 Combobox 的选择发生变化时，自动更新另一个 Combobox 的选项。这种功能在...
jQuery EasyUI API 中文文档 – ComboBox组合框
12-11
其中，ComboBox 组件是 EasyUI 提供的一种用于创建下拉列表的控件，它结合了输入框和下拉菜单的功能，使得用户可以在输入框中输入文字或者从下拉列表中选择。ComboBox 在基础的 `$.fn.combo` 上进行了扩展，并且通过...
easyui-textbox和easyui-combobox的onchange事件响应实例
08-01
`easyui-combobox` 则是一个下拉选择框组件，允许用户从预定义的选项列表中选择一项。这两个组件在网页表单中非常常见，可以用于收集用户的输入数据。 `onchange` 事件是 JavaScript 中的一个重要事件，它会在元素...
EasyUI中combobox默认值注意事项
09-03
EasyUI的Combobox组件是一个强大的选择项输入控件，它将文本输入框和下拉列表相结合，提供了丰富的功能。然而，在设置默认值时，如果不注意一些细节，可能会导致预期效果无法实现。以下是对`EasyUI combobox`默认值...
Easyui之ComboBox下拉列表组
月亮投递员的博客
06-30 539
ComboBox组件前言属性事件方法案例演示1、静态html实现2、js动态获取数据总结 前言 今天为大家分享的是Easyui中的Comobox组件，下拉列表组的实现方式！ 属性 首先来展示一下comobox组件中的一些属性、事件、以及方法吧~ 事件 方法 当然，这些ComoBox的属性、方法、事件都是从Combo组件中拓展而来的，所以不仅有Combo的属性、还有ComboBox组件的属性！ 案例演示 博主还是喜欢按照这个固定的套路来吧，分为两种方式： 1、静态html实现 这种方式一般不通用的
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 combotree异步下拉选择框
一只很酸de橘子
03-06 275
easyui combotree异步下拉选择框
easyui combobox ajax分页,Jquery easyui中combobox的默认“请选择”“全部”扩展示例
weixin_39999025的博客
08-05 340
jquery easyui请选择全部combocombobox扩展版本1.2.2：1、首先在上面添加一段用来显示默认文字的代码。位置在复制代码 代码示例:var _5c8=$("").appendTo(span);之前加上$("").appendTo(span);2、样式：复制代码 代码示例:.combo-defaultText{float:left;position:absolute;paddi...
EasyUI datagrid实现翻页保持选中状态
随风飘扬
06-21 2992
转载自：http://blog.csdn.net/junlong750/article/details/51470834 1、首先设置datagrid属性的idField主键，这里假如为id，若idField为其他的，记住下面的代码里的 id也要做相应的修改 2、建立一个全局的JavaScript数组var checke...
EasyUI之树形结构tree
热门推荐
sunpy
04-20 1万+
1.样式 树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。 2.静态方式生成树 tree 第一章 第一节 第一条
jsp中EasyUi模糊匹配搜索框combobox前端和后端代码
04-01
前端代码： ``` <input class="easyui-combobox" id="searchBox" style="width:200px;" data-options="valueField:'value',textField:'text',url:'/search',mode:'remote',method:'get',panelHeight:'auto'" /> ``` 后端代码： ``` @RequestMapping(value = "/search", method = RequestMethod.GET) @ResponseBody public List<Map<String, Object>> search(@RequestParam String q) { List<Map<String, Object>> result = new ArrayList<Map<String, Object>>(); // 根据关键字q查询数据 // 将查询结果转换为Map<String, Object>类型的列表 return result; } ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值