下拉框combobox

最新推荐文章于 2026-06-29 12:02:37 发布

原创最新推荐文章于 2026-06-29 12:02:37 发布 · 409 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

easyui

ajax

本文档介绍了如何使用EasyUI创建下拉框，并从后台获取数据加载到Combobox中。通过示例展示了如何从控制器返回JSON数据填充下拉框，以及如何获取Combobox的选中文本值和处理onchange、onselect事件。

【1】后台传查询出数据，返回list.tojson

[1]

[2]

$.post('@Url.Action("GetYearList")', {}, function(data) {
$("#startTime").combobox('loadData', data);
$("#endTime").combobox('loadData', data);
$("#btn_search").click();
}, 'json');

[3]

public string GetYearList()
{
EfHelper_RemoteSenseModel efHelper = new EfHelper_RemoteSenseModel();
List<decimal?> years = efHelper.FindAll<T_BUS_GDP>().OrderBy(r => r.YEAR).Select(r => r.YEAR).Distinct().ToList();//V_BUS_GDP
List<YearBox> yearBox = new List<YearBox>();
years.Sort();
for (int i = 0; i < years.Count; i++)
{
YearBox year = new YearBox();
year.id = years[i].ToString();
year.text = years[i].ToString();
year.selected = (i == 0 ? true : false);
yearBox.Add(year);
}

return yearBox.ToJson();
}

public struct YearBox
{
public bool selected;
public string text;
public string id;
}

【2】后台直接返回json字符串

[1]

[2]

$.post('@Url.Action("GetStyle")', {}, function (data) {
$("#DataStyle").combobox('loadData', data);

$("#btn_search").click();
}, 'json');

[3]

/// <summary>
/// 数据类型下拉框
/// </summary>
/// <returns></returns>
public string GetStyle()
{
return "[{\"id\":\"0\",\"text\":\"GDP\",\"selected\":true},{\"id\":\"1\",\"text\":\"第三产业产值\"},{\"id\":\"2\",\"text\":\"工业总产值\"},{\"id\":\"3\",\"text\":\"固定资产投资总额\"},{\"id\":\"4\",\"text\":\"出口总额\"},{\"id\":\"5\",\"text\":\"人均GDP\"}," +
"{\"id\":\"6\",\"text\":\"实际利用外商直接投资\"},{\"id\":\"7\",\"text\":\"外商投资占GDP比例\"},{\"id\":\"8\",\"text\":\"人均GDP增长率\"},{\"id\":\"9\",\"text\":\"全社会固定资产投资增长率\"},{\"id\":\"10\",\"text\":\"工业产值增长率\"},{\"id\":\"11\",\"text\":\"第三产业产值增长率\"},{\"id\":\"12\",\"text\":\"第三产业从业人员\"}]";
}

【3】获取下拉框的文本值

$("#DataStyle").combobox("getText")

下拉框改变onchange事件，onselect事件

$("#DataStyle").combobox({

onChange: function (n, o) {
//alert($("#DataStyle").combobox("getText"));//改变前的值
},
onSelect: function () {
//$("#DataStyle").combobox("getText")
//$("#th1").text() = "";
//$("#th1").text() = ("#DataStyle").combobox("getText");
get1($("#DataStyle").combobox("getText"));
//alert($("#th0").text());//选中的值
}
});

【4】改变th的文本内容