本文实例为大家分享了EasyUI Combobox下拉列表的具体代码,供大家参考,具体内容如下
1. html代码
<label>性别:</label> <input class="easyui-combobox" style="width: 100px;" type="text" id="gender" />
2.显示
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);//设置默认值为今年
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“EasyUI学习之Combobox下拉列表(1)”评论...
更新日志
2025年10月27日
2025年10月27日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]
