使用easyUI框架实现select下拉框动态加载option

最新推荐文章于 2023-11-22 16:31:02 发布

转载最新推荐文章于 2023-11-22 16:31:02 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/shoose/p/8393071.html

文章标签：

#javascript #json #ui #ViewUI

本文介绍使用EasyUI框架时如何解决动态加载Select下拉框的Option问题。具体步骤包括设置Select元素的Class属性，并通过Ajax请求从服务器获取数据，然后使用Combobox组件的loadData方法将数据填充到Select中。

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

使用easyUI框架在页面做动态加载select下拉框的option时，会出现值已经通过ajax取到并且可以alert弹出但无法追加到指定id的select下。

解决办法：

1、页面select加class="easyui-combobox"

<select id="user" name="user" class="easyui-combobox" style="width:200px;"></select>

2、js文件内容

$(function(){
    onChangeName();
});
function onChangeName(){
    // 获取到部门下拉框的值
    var options = $("#department option:selected");
    var vdepartment= options.val();
var user= document.getElementById("user");var dataList = [];
    $.ajax({ // 使用JQuery内置的Ajax方法
        type : "post", // post请求方式
        async : false, //同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行
        url : "tevo_listUserUI.action?department=" + vdepartment,
　　　　 dataType : "json", // 返回数据形式为json
        success : function(result) {
            for ( var u = 0; u < result.length; u++) {
                 dataList.push({"value": result[u].userId,"text":result[u].userName});
            }
            $("#user").combobox("loadData", dataList);
        }
    });
}