easyui实现简单的下拉框

最新推荐文章于 2025-03-24 21:33:20 发布

AJAX-UP

最新推荐文章于 2025-03-24 21:33:20 发布

阅读量1.5w

点赞数 3

CC 4.0 BY-SA版权

文章标签： jquery easyui

本文链接：https://blog.youkuaiyun.com/chelseahazard/article/details/54137243

本文详细介绍如何在JSP页面中使用EasyUI组件库创建一个动态加载数据的下拉框选择器。首先引入必要的EasyUI和jQuery文件，然后通过Ajax请求从后端获取数据，并利用这些数据填充下拉框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，在jsp页面加入easyui和jquery的文件如下

<script type="text/javascript" src="assets/bootstrap/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="assets/easyui/jquery.easyui.min.js"></script>
<!-- easyui的本地化 -->
<script type="text/javascript"src="assets/easyui/locale/easyui-lang-zh_CN.js"></script>

第二，在页面设置input标签，如下

数据状态:<input id="qysjzt" name="qysjzt" class="easyui-combobox" width="50px">

第三，使用ajax请求初始化，如下

<script type="text/javascript">
$(function(){  
    $.ajax({
        url:"rest/dict/selectdict",  
        dataType:"json", 
        type:"GET",
        data:{
            "type":"audit_state"        
        },
        success:function(data){                                 
                    //绑定第一个下拉框
                    $('#qysjzt').combobox({
                            data: data,                        
                            valueField: 'code',
                            textField: 'description'}
                            );                       
       },
       error:function(error){
           alert("初始化下拉控件失败");
       }
    })
    }
    )
</script>

第四，写后台的处理（这里用的是SpringMVC）

/**
     * 查询字典表
     * @throws IOException
     */
    @RequestMapping(value = "/selectdict", method = RequestMethod.GET)
    public void selectUserType(@RequestParam String type) throws IOException {
        List<DictionaryTable> dicts = iDictionaryTableService.selectByType(type);
        response.getWriter().write(JSONArray.fromObject(dicts).toString());
    }

至此，一个简单的easyui下拉框就实现了，如下图
这里写图片描述