jQuery-EasyUI学习（八）ComboBox（下拉列表框）

最新推荐文章于 2024-04-07 10:11:05 发布

quge_name_harder

最新推荐文章于 2024-04-07 10:11:05 发布

阅读量550

点赞数

分类专栏： easyUi

本文链接：https://blog.csdn.net/quge_name_harder/article/details/84334788

版权

本文详细介绍了jQuery EasyUI中的ComboBox组件，包括其作为下拉列表框的功能，用户可以编辑文本并选择值。文章通过实例展示了如何创建ComboBox，并列举了相关属性、事件和方法，帮助读者深入理解和应用。

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

一、ComboBox（下拉列表框）

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

二、例子

城市：
	<select id="cityID" class="easyui-combobox" name="city" style="width:200px;">   
	    <option>aitem1</option>   
	    <option>bitem2</option>   
	    <option>bitem3</option>   
	    <option>citem4</option>   
	    <option>citem5</option>   
	    <option>citem4</option>   
	    <option>ditem5</option>   
	    <option>ditem4</option>   
	    <option>ditem5</option>   
	    <option>ditem4</option>   
	    <option>ditem5</option>   
	    <option>eitem4</option>   
	    <option>eitem5</option>   
	</select>

实现效果：

上面是用组件的形式（class="easyui-combobox"）定义，接下来用js方式定义

城市：
	<input id="cityID" name="city"/>  
	
	<script type="text/javascript">
		//url表示请求的路径
		//valueField表示传到服务器的值，看不见的
		//textField表示页面中显示的值，看得见
		$("#cityID").combobox({
			url : "../json/city.json",
			valueField :"id",    
   			textField : "name"   
		})