easyUI入门《十九、combobox基础：选择框》

最新推荐文章于 2022-09-08 18:20:16 发布

leijiahui

最新推荐文章于 2022-09-08 18:20:16 发布

阅读量140

点赞数

分类专栏： easyUI

本文链接：https://blog.csdn.net/leijiahui/article/details/82431372

版权

easyUI 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

这篇博客介绍了easyUI中的combobox组件，它是用于创建选择框的基础元素。内容涵盖了combobox的基本用法，包括如何初始化、设置选项、响应事件以及与其他组件的交互。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<!--引入基本库-->
		<script type="text/javascript" src="jquery-easyui-1.5.5.4/jquery.min.js"></script>
		<script type="text/javascript" src="jquery-easyui-1.5.5.4/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="jquery-easyui-1.5.5.4/locale/easyui-lang-zh_CN.js"></script>
		<link rel="stylesheet" href="jquery-easyui-1.5.5.4/themes/default/easyui.css" />
		<link rel="stylesheet" href="jquery-easyui-1.5.5.4/themes/icon.css" />
	</head>

	<body>
		<p>基础选择框</p>
		<div>
			<!--<input id="cc" style="width: 150px;" />-->
			<select id="cc" style="width: 150px;"></select>
		</div>
		<div id="sp">
			<input type="radio" name="lang" value="01" /><span>Java</span><br />
			<input type="radio" name="lang" value="02" /><span>Python</span><br />
			<input type="radio" name="lang" value="03" /><span>PHP</span><br />
			<input type="radio" name="lang" value="04" /><span>C#</span><br />
		</div>
		<script type="text/javascript">
			$(function() {
				$("#cc").combo({
					required: true,
					editable: false
				});
				$("#sp").appendTo($("#cc").combo("panel"));
				$("#sp input").click(function() {
					var v = $(this).val();
					var s = $(this).next("span").text();
					$("#cc").combo("setValue", v).combo("setText", s).combo("hidePanel")
				})
			});
		</script>

		//可以设置多选
		<p>经典选择框</p>
		<select class="easyui-combobox" style="width: 100px;height: 50px;" data-options="multiple:true,multiline:true">
			<option value="1">Java</option>
			<option value="2">PHP</option>
			<option value="3">Python</option>
		</select>

		<p>分组选择框</p>
		<input id="group" />
		<script type="text/javascript">
			$(function() {
				var data = [{
					"value": "1",
					"text": "firefox 2.0",
					"group": "Firefox"
				}, {
					"value": "2",
					"text": "firefox 1.5",
					"group": "Firefox"
				}, {
					"value": "3",
					"text": "ie 6.0",
					"group": "IE"
				}, {
					"value": "4",
					"text": "ie 7.0",
					"group": "IE"
				}];
				$("#group").combobox({
					data: data,
					groupField: "group",
					icons: [{
						iconCls: 'icon-add',
						handler: function() {
							alert("add")
						}
					}, {
						iconCls: 'icon-remove',
						handler: function() {
							alert("remove")
						}
					}]
				})
			})
		</script>

		<p>加载分组数据</p>
		<input id="group1" class="easyui-combobox" /><input type="button" onclick="loadercombobox()" value="加载" />
		<script type="text/javascript">
			function loadercombobox() {
				$("#group1").combobox("loadData", [{
					"value": "1",
					"text": "firefox 2.0",
					"group": "Firefox"
				}, {
					"value": "2",
					"text": "firefox 1.5",
					"group": "Firefox"
				}, {
					"value": "3",
					"text": "ie 6.0",
					"group": "IE"
				}, {
					"value": "4",
					"text": "ie 7.0",
					"group": "IE"
				}])
			}
		</script>
	</body>

</html>