前端下拉框实现

最新推荐文章于 2024-09-05 16:15:02 发布

盐煽小星球

最新推荐文章于 2024-09-05 16:15:02 发布

阅读量217

点赞数 5

文章标签：前端 java html5 easyui

本文链接：https://blog.csdn.net/2301_76687035/article/details/140695113

版权

datalist下拉框动态加载数据Ajax

后端controller向前端返回数据集合

前端代码实现：

 <div class="appNameSelect">
        <label  style="
        font-size: 14px;
        color: #aeb7bb;
        ">角色</label>
        <input id="appName" type="text" name="role" list="roleList" style="padding:0.5em;border-radius:10px;">
        <datalist id="roleList">
            <option value="">请选择</option>
        </datalist>
    </div>

第一种遍历：

<script>
$(document).ready(function()
    {
        //动态绑定数据
            //执行Ajax请求
            $.ajax({
                type: "POST",
                url: "http://localhost:8080/login/getRoleList",
                async: true,
                dataType: "json",
                success: function (data) {
                    console.log(data)
                    //清空下拉框选项
                    $("#roleList").empty();
                    $("#roleList").append("<option value=''>请选择</option>");
                    if (data&& data.length> 0) {
                        //遍历数据
                        for (var i = 0; i < data.length; i++) {
                            var id=data[i].id
                            var role_Name=data[i].role_NAME
                            //绑定数据
                            var option = "<option value=" + id + ">" + role_Name + "</option>";
                            $("#roleList").append(option);
                        }
                    }
                }
            });
    })

</script>

第二种遍历：

<script>
   $(document).ready(function() {
                    $.ajax({
                        url: "http://localhost:8080/check/selectDepartment", // 从服务器获取数据的URL
                        type: 'POST',
                        dataType: 'json',
                        success: function(data) {
                            var select = $('#roleList');
                            $.each(data, function(key, value) {
                                select.append('<option value="' + value.id + '">' + value.role_Name + '</option>');
                            });
                        }
                    });
       
</script>

Easyui Combobox实现下拉框动态数据加载

后端controller向前端返回数据集合

前端代码实现：

 <input class="easyui-combobox" id="departsList" name="department" style="width:150px" data-options="required:true" />


<script>
  $(document).ready(function() {

                        $.post("http://localhost:8080/check/selectDepartment",function(data){//后台请求

                            var options=$("#departsList").combobox('options');
                            options.textField="department_NAME";
                            options.valueField="id";
                            console.log(data);
                            //加载数据
                            $("#departsList").combobox("loadData",data);}
                        ,"json")
}
</script>