easyUI中选择下拉菜单和输入框的使用

最近在做一个网站,涉及到需要实现下拉选择菜单和输入框的混合实现。此时想到了EasyUI上的插件的使用。

  1. 首先下载JQuery EasyUI

登录 http://www.jeasyui.net/download/ 下载EasyUI的GLP版本。

   2. 参考代码

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>ComboBox - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"/>
	<link rel="stylesheet" type="text/css" href="../themes/icon.css"/>
	<link rel="stylesheet" type="text/css" href="../css/demo.css"/>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
	<select name="add_NNo1" class="dfinput">
</head>
<body>
	<p>Simple ComboBox: </p>
	<select id="cc" class="easyui-combobox" name="555" style="width:200px;" data-options="required:true">
		<option value="AL">Alabama</option>
		<option value="AK">Alaska</option>
		<option value="CO">Colorado</option>
		<option value="CT">Connecticut</option>
		<option value="DE">Delaware</option>
		<option value="FL">Florida</option>
		<option value="GA">Georgia</option>
		<option value="HI">Hawaii</option>
		<option value="ID">Idaho</option>
		<option value="NV">Nevada</option>
		<option value="NH">New Hampshire</option>
		<option value="WY">Wyoming</option>
	</select>
</body>
</html>

其中需要
<span>	</span><script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
<pre name="code" class="html"><span>	</span><link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"/>
	<link rel="stylesheet" type="text/css" href="../themes/icon.css"/>
	<link rel="stylesheet" type="text/css" href="../css/demo.css"/>
导入这三个js 或者是 css 样式。在下载的EasyUI中可以找到上述所需要的js 或 css 样式。




下拉选项


可编辑输入










结束。


  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
easyui 的 messager 组件,如果需要将消息提示框变成下拉框的形式,可以使用 easyui 的 combobox 组件。具体实现步骤如下: 1. 在页面引入 easyui 的 combobox 和 messager 组件: ```html <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/easyui/1.8.0/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/easyui/1.8.0/themes/icon.css"> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/easyui/1.8.0/jquery.easyui.min.js"></script> ``` 2. 创建一个 combobox 元素,并设置其属性: ```html <input id="mycombobox" class="easyui-combobox" style="width:200px;" data-options=" valueField: 'id', textField: 'text', panelHeight: 'auto', editable: false, onSelect: function(record){ $.messager.alert('提示', '您选择了:'+record.text, 'info'); } "> ``` 其,`valueField` 和 `textField` 分别指定了下拉框选项的值和显示文本的字段名,`panelHeight` 设置下拉框的高度自适应,`editable` 设置下拉框不可编辑,`onSelect` 事件处理函数在用户选择下拉框的某个选项时触发,弹出消息提示框。 3. 初始化 combobox 选项: ```javascript $('#mycombobox').combobox('loadData', [{ id: 1, text: '选项一' }, { id: 2, text: '选项二' }, { id: 3, text: '选项三' }]); ``` 这里使用了 `loadData` 方法将选项数据加载到 combobox 。 通过以上步骤,就可以将 easyui 的 messager 组件变成下拉框了。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值