Ajax-combobox动态绑定数据_ajaxcombo-优快云博客

本文链接：https://blog.youkuaiyun.com/zhangjiahao7521/article/details/78174013

本文介绍如何使用EasyUI的Combobox控件，通过Ajax动态从数据库加载数据，实现下拉框的数据绑定。在实际项目中，这个功能的实现可能遇到一些挑战，本文将分享解决这些问题的经验。

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

　　分享一个常用的知识点，最近在项目中用到了，弄这块的时候废了不少劲。

　　项目中用到的控件是easyui-combobox，下拉框中加载数据库中的数据。
　　
　　下面是一个简单的例子：

Html

仓库：<input id="select_storage" class="easyui-combobox" data-options="editable:true,valueField:'id',textField:'text',width:80"/>

//窗体加载时执行
$(document).ready(function () {

 //获取所有仓库名称  
    $.ajax({
        type: "GET",
        url: "/WarehousingLog/QueryAllStorageName",
        dataType: "json",
        success: function (data) {

            //测试是否有数据传入
            if (data.length >= 0) {
                alert("仓库有数据！");

                //定义一个变量存放数据
                var data1 = [{ 'text': '', 'id': '' }];
                //循环，向变量里添加数据
                for (var i = 0; i < data.length; i++) {
                    data1.push({ "text": data[i].StorageName, "id": data[i].StorageID });//text为元素的文本内容，id为该元素的value值
                }

                //在下拉框中加载变量中的数据
                $('#select_storage').combobox("loadData", data1);
                //                  .datafrid为table加载
            }
        },
        error: function (data) {
            alert('系统出错了，请联系管理员！');
        }
    })


})//窗体加载

Controller

 public JsonResult QueryAllStorageName()
        {
            WarehousingLogBLL item = new WarehousingLogBLL();
            List<T_Storage> list = storage.QueryAllStorage ();           
            return Json (list,JsonRequestBehavior.AllowGet );
        }