EasyUI学习之Combobox（一）

最新推荐文章于 2025-06-29 21:22:23 发布

原创最新推荐文章于 2025-06-29 21:22:23 发布 · 4.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Combobox #easyui #下拉列表框 #html #年份下拉列表

EasyUI 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在网页中使用 EasyUI 的 Combobox 控件，包括设置性别选择框、加载本地数据、从服务器获取数据并填充下拉框，以及设置默认选项等内容。

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

1. html代码


<label>性别：</label>
<input class="easyui-combobox" style="width: 100px;" type="text" id="gender" />

2.显示

Combobox示例图片

3.js代码

//以下的方式可以解决浏览器汉字乱码问题
/********************1.加载本地数据*******************/
// 页面加载后显示表数据
$(function() {
    var queryData = {};// 可添加一些预设条件
    InitGrid(queryData);// 初始化Datagrid表格数据
    InitDictItem(); // 初始化字典信息
});

// 初始化字典信息
function InitDictItem() {
    // 性别
    BindDictGender('gender');
}

// 绑定性别/男：1；女：2；全部：0
function BindDictGender(comboid) {
    // 操作类型 全部 男 女
    // data = [{ "Name": "\u5168\u90e8", "Value": 0 }, { "Name": "\u7537",
    // "Value": 1 }, { "Name": "\u5973", "Value": 2 }];
    data = [ {
        "Name" : "\u7537",//男
        "Value" : 1
    }, {
        "Name" : "\u5973",//女
        "Value" : 0
    } ];
    $('#' + comboid).combobox({
        valueField : 'Value',
        textField : 'Name',
        panelHeight : 'auto',
        required : true,
        editable : false,// 不可编辑，只能选择
        data : data
    });
    $('#' + comboid).combobox('select', "1");
}

/********************2.加载数据库数据*******************/
//绑定字典信息Code,设置默认值为{
//            Code:"";
//            Name:"-请选择-";
//      }
function BindBuildingDictItem(comboid, catlog) {
    $.ajax({
        type: 'post',
        url: '/Common/GetComboBoxValue',//访问路径
        dataType: 'json',
        data: { name: catlog },
        success: function (data) {
            data.unshift({ "Name": "\u002d\u8bf7\u9009\u62e9\u002d", "Code": "" });

            $('#' + comboid).combobox({
                valueField: 'Code',
                textField: 'Name',
                panelHeight: 'auto',
                required: true,
                editable: false,//不可编辑，只能选择
                data: data
            });
            $('#' + comboid).combobox('select', "");
        }
    });
}

/********************3.不解决汉字乱码*******************/
BindDictItem("LiveStatue", '你的url');
//初始化字典信息的控件绑定
function BindDictItem(comboid,url) {
    $('#' + comboid).combobox({
        valueField: 'Code',
        textField: 'Name',
        url: url,
        panelHeight: 'auto',
        required: true,
        editable: true,//不可编辑，只能选择
        value: '全部'
    });
}

4.Json数据

{ {
        "Code": "1",
        "Name": "男"
    }, {
        "Code": "0",
        "Name": "女"
    }
}

5.设置默认选项和取值

//设置默认选项
$('#gender').combobox('select', 1);
//取值
var gender = $('#gender').combobox('getValue');

6.年份小例子

///////////////////////////入学年份///////////////////////////////////////
$('#EduStartYear').combobox({
    valueField: 'Value',
    textField: 'Name',
    panelHeight: 'auto',
    required: true,
    editable: false, //不可编辑，只能选择
});
var data = []; //创建年度数组
var thisYear = new Date().getUTCFullYear(); //今年
var startYear = thisYear - 5; //起始年份

var endYear = thisYear + 5; //结束年份

//数组添加值今年的前后五年
for (var i = 0; i <= 10; i++) {
    data.push({
        "Value": startYear + i,
        "Name": startYear + i
    });
}
$("#EduStartYear").combobox("clear")//下拉框加载数据,设置默认值为今年
                .combobox("loadData", data)
                .combobox("setValue", thisYear); 
//$("#EduStartYear").combobox("setValue", thisYear);//设置默认值为今年