easyui的select使用

EasyUI下拉框示例

最新推荐文章于 2024-10-01 21:28:00 发布

转载最新推荐文章于 2024-10-01 21:28:00 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/pecool/p/8462752.html

文章标签：

#javascript #json #ViewUI

本文介绍如何使用EasyUI实现下拉选择框功能，并提供两种实现方式：一种是通过HTML属性直接设置，另一种是利用jQuery进行配置。此外，还说明了valueField和textField的作用。

这是一个小demo，其他相关功能查看easyuiAPI，需要注意的是valueField: 'id', textField: 'name'中id指json的key，name指json的值，id和name只需和json中对应即可。

<!-- 原始方法 -->
<select>
<option>北京</option>
<option>上海</option>
<option>广东</option>
</select>

<!-- 使用easyui方法一 -->
<input class="easyui-combobox" data-options="valueField: 'id', textField: 'name',url:'${pageContext.request.contextPath }/json/combobox.json'">


<!-- 使用easyui方法二 -->
<input id="easyuiSelect" class="easyui-combobox">
<script type="text/javascript">
        $('#easyuiSelect').combobox({
            url:'${pageContext.request.contextPath }/json/combobox.json',
            valueField:'id',
            textField:'name'
        });
</script>