简单下拉框封装

00788991 2020-09-18 09:16:03
下拉框绑定数据太麻烦了,每一个都要查询一遍,绑定一遍,才可以完成一个,当一个两个的时候还好,但是同一个页面有十几个的就太不好玩了;
一级:
$.post("@Url.Content("~/BaseInfoManage/class/selectAcademeFor")", function (jsonObj) {
for (var i = 0; i < jsonObj.length; i++) {
//console.log(jsonObj)
$("#searchAcademID").append('<option value="' + jsonObj[i].academeID + '">' + jsonObj[i].academeName + '</option>');
$("#academeID").append('<option value="' + jsonObj[i].academeID + '">' + jsonObj[i].academeName + '</option>');
}
});
二级
function searchspecialtyAndclass() {
var academeID = $("#searchAcademID").val();//获取学院ID
var academeID = $("#academeID").val()
//专业 searchspecialtyID 页面下拉框 specialtyID 新增模态框下拉框
$("#searchspecialtyID").empty();//清空页面下拉框上一次的记录
$("#searchspecialtyID").append(' <option value="0">-----select-----</option>');
$.post("@Url.Content("~/BaseInfoManage/class/selectspecialtyFor")", { academeID: academeID }, function (jsonObj) {
for (var i = 0; i < jsonObj.length; i++) {
$("#searchspecialtyID").append('<option value="' + jsonObj[i].specialtyID + '">' + jsonObj[i].specialtyName + '</option>');
$("#specialtyID").append('<option value="' + jsonObj[i].specialtyID + '">' + jsonObj[i].specialtyName + '</option>');
}
})
//年级 searchgradeID 页面下拉框 gradeID 新增模态框下拉框
$("#searchgradeID").empty();//清空页面下拉框上一次的记录
$("#searchgradeID").append(' <option value="0">-----select-----</option>');
$.post("@Url.Content("~/BaseInfoManage/class/selectgradeFor")", {
academeID: academeID }, function (jsonObj) {
for (var i = 0; i < jsonObj.length; i++) {
$("#searchgradeID").append('<option value="' + jsonObj[i].gradeID + '">' + jsonObj[i].gradeName + '</option>');
$("#gradeID").append('<option value="' + jsonObj[i].gradeID + '">' + jsonObj[i].gradeName + '</option>');
}
});
这是真的难啊,就三个下拉框就要循环写入这么多的代码!!!那么就需要一个简单整洁的写法!

把相同的代码写到一个方法里面,就行输出,获得相同代码的地方,那么我们就可以把相同的代码写一起;通过console控制台输出看一下获取的id值,也可以通过console控制台输出看一下获取具体id对应的text名称值。再通过append来获取下标为0的第一条数据,如果每获取一条数据就这样写一句代码会好麻烦,而且是在知道有多少条数据的情况下可以这样写,但如果不知道有多少条数据就不可以这样写了。所以可以用for循环来追加数据,把获取下标为0的数字改成i的变量;通过if来判断判断for循环,获得它的循环结果绑定到下拉框里面:
function createselect(selectIds, url, params, defaultValue) {
//1.清空上一次的缓存
//判断是否为数组
if ($.type(selectIds) == 'array') {
for (var i = 0; i < selectIds.length; i++) {
$("#" + selectIds[i]).empty();
$("#" + selectIds[i]).append('<option value="0">-----select-----</option>');
}
} else {
$("#" + selectIds).empty();
$("#" + selectIds).append('<option value="0">-----select-----</option>');
}

//2. 请求 生成option
$.post(url, params, function (jsonObj) {
for (var i = 0; i < jsonObj.length; i++) {
var strOption = '<option value="' + jsonObj[i].value + '">' + jsonObj[i].text + '</option>';

//判断是否是数组
if ($.type(selectIds) == 'array') {
for (var j = 0; j < selectIds.length; j++) {
$("#" + selectIds[j]).append(strOption);
}
} else {
$("#" + selectIds).append(strOption);
}
}
});
}
写到一个盒子里面,然后在外面调用,这样子多整洁!

一级:
createselect(['searchAcademID', 'academeID'], "@Url.Content("~/common/Select/selectAcademeFor")");
二级:
function searchspecialtyAndclass() {
var academeID = $("#searchAcademID").val();//获取学院ID
//专业 searchspecialtyID 页面下拉框 specialtyID 新增模态框下拉框createselect(["searchspecialtyID","specialtyID"],"@Url.Content("~/common/Select/selectspecialtyFor")", { academeID, academeID})
//年级 searchgradeID 页面下拉框 gradeID 新增模态框下拉框 createselect(["searchgradeID","gradeID"],"@Url.Content("~/common/Select/selectgradeFor")", { academeID, academeID})
}
同样的一个下拉框,不同的写法,效果甚至比原始写法更加好,看上去更加的以目了然!

所以有时候代码这种东西,并不是越多越好,而是要用最简单的代码和方法实现最好的效果,同时看上去简洁明了!以最少的代码实现最好的效果才是真理!


努力奔跑的小白!!!
...全文
8806 点赞 收藏 回复
写回复
回复
切换为时间正序
请发表友善的回复…
发表回复

还没有回复,快来抢沙发~

发帖
其他
创建于2009-10-09

222

社区成员

其他产品/厂家
申请成为版主
帖子事件
创建了帖子
2020-09-18 09:16
社区公告
暂无公告