下拉框系結資料太麻煩了,每一個都要查詢一遍,系結一遍,才可以完成一個,當一個兩個的時候還好,但是同一個頁面有十幾個的就太不好玩了;
一級:
$.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="https://bbs.csdn.net/topics/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="https://bbs.csdn.net/topics/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="https://bbs.csdn.net/topics/0">-----select-----</option>');
}
} else {
$("#" + selectIds).empty();
$("#" + selectIds).append('<option value="https://bbs.csdn.net/topics/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})
}
同樣的一個下拉框,不同的寫法,效果甚至比原始寫法更加好,看上去更加的以目了然!
所以有時候代碼這種東西,并不是越多越好,而是要用最簡單的代碼和方法實作最好的效果,同時看上去簡潔明了!以最少的代碼實作最好的效果才是真理!
努力奔跑的小白!!!
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/73261.html
標籤：其他