Home > other >  A simple drop-down box encapsulation
A simple drop-down box encapsulation

Time:09-18

Drop-down box bound data is too much trouble, every one to query again, bind again, can complete a, when a two was fine, but of a dozen of the same page is not funny.
Level 1:
$.post (" @ Url. Content (" ~/BaseInfoManage/class/selectAcademeFor ") ", the function (jsonObj) {
for (var i=0; I & lt; JsonObj. Length; I++) {
//the console. The log (jsonObj)
$(" # searchAcademID "). Append (' & lt; The option value="' + jsonObj [I] academeID + '" & gt; '+ jsonObj [I] academeName +' & lt;/option> ');
$(" # academeID "). Append (' & lt; The option value="' + jsonObj [I] academeID + '" & gt; '+ jsonObj [I] academeName +' & lt;/option> ');
}
});
Level 2
The function searchspecialtyAndclass () {
Var academeID=$(" # searchAcademID "). Val ();//college ID
Var academeID=$(" # academeID "). Val ()
//professional searchspecialtyID page drop-down box specialtyID new modal dialog drop-down box
$(" # searchspecialtyID "). The empty ();//empty page drop-down box last record
$(" # searchspecialtyID "). Append (' & lt; The option value="https://bbs.csdn.net/topics/0" & gt; -- -- -- -- -- select -- -- -- -- -- & lt;/option> ');
$.post (" @ Url. Content (" ~/BaseInfoManage/class/selectspecialtyFor ") ", {academeID: academeID}, function (jsonObj) {
for (var i=0; I & lt; JsonObj. Length; I++) {
$(" # searchspecialtyID "). Append (' & lt; The option value="' + jsonObj [I] specialtyID + '" & gt; '+ jsonObj [I] specialtyName +' & lt;/option> ');
$(" # specialtyID "). Append (' & lt; The option value="' + jsonObj [I] specialtyID + '" & gt; '+ jsonObj [I] specialtyName +' & lt;/option> ');
}
})
//grade searchgradeID page drop-down box gradeID new modal dialog drop-down box
$(" # searchgradeID "). The empty ();//empty page drop-down box last record
$(" # searchgradeID "). Append (' & lt; The option value="https://bbs.csdn.net/topics/0" & gt; -- -- -- -- -- select -- -- -- -- -- & lt;/option> ');
$.post (" @ Url. Content (" ~/BaseInfoManage/class/selectgradeFor ") ", {
AcademeID: academeID}, function (jsonObj) {
for (var i=0; I & lt; JsonObj. Length; I++) {
$(" # searchgradeID "). Append (' & lt; The option value="' + jsonObj [I] gradeID + '" & gt; '+ jsonObj [I] gradeName +' & lt;/option> ');
$(" # gradeID "). Append (' & lt; The option value="' + jsonObj [I] gradeID + '" & gt; '+ jsonObj [I] gradeName +' & lt;/option> ');
}
});
This is really difficult, three drop-down box will cycle write so much code!!!!!! You will need to written a simple and neat!

One way to write the same code, line output, to obtain the same code, then we can write the same code. Through the console console output see get id value, can also through the console console output look for specific id corresponding text name value, and then get the subscript is 0 by append the first data, write each to obtain a data is a good code will trouble, and it is under the condition of the article to know how many data you can write, but if we don't know how many data can't write like this, so you can use a for loop to append the data, the index of 0 for digital into the I variable; Judging by the if judgment for loop, get its circulation result is bound to the drop-down box:
The function createselect (selectIds, url, params, defaultValue) {
//1. Clear the previous cache
//determine whether array
If ($. Type (selectIds)=='array') {
for (var i=0; I & lt; SelectIds. Length; I++) {
$(" # "+ selectIds [I]). The empty ();
$(" # "+ selectIds [I]), append (' & lt; The option value="https://bbs.csdn.net/topics/0" & gt; -- -- -- -- -- select -- -- -- -- -- & lt;/option> ');
}
} else {
$(" # "+ selectIds). The empty ();
$(" # "+ selectIds). Append (' & lt; The option value="https://bbs.csdn.net/topics/0" & gt; -- -- -- -- -- select -- -- -- -- -- & lt;/option> ');
}

//2. The request generated option
$.post (url, params, function (jsonObj) {
for (var i=0; I & lt; JsonObj. Length; I++) {
Var strOption='& lt; The option value="' + jsonObj [I] value + '" & gt; '+ jsonObj [I]. Text +' & lt;/option> ';

//judge whether array
If ($. Type (selectIds)=='array') {
For (var j=0; J & lt; SelectIds. Length; J++) {
$(" # "+ selectIds [j]), append (strOption);
}
} else {
$(" # "+ selectIds). Append (strOption);
}
}
});
}
Write in a box, and then call in the outside, this looks more clean and tidy!

Level 1:
Createselect ([' searchAcademID ', 'academeID], "@ Url. Content (" ~/common/Select/selectAcademeFor") ");
Level 2:
The function searchspecialtyAndclass () {
Var academeID=$(" # searchAcademID "). Val ();//college ID
//professional searchspecialtyID page drop-down box specialtyID new modal dialog drop-down box createselect ([" searchspecialtyID ", "specialtyID]", "@ Url. Content (" ~/common/Select/selectspecialtyFor") ", {academeID, academeID})
//grade searchgradeID page drop-down box gradeID new modal dialog drop-down box createselect ([" searchgradeID ", "gradeID"], "@ Url. Content (" ~/common/Select/selectgradeFor") ", {academeID, academeID})
}
The same a drop-down box, the different method and effect is even better than the original writing more, look more to know!

This kind of thing, so it is sometimes code is not the more the better, but want to use the simplest code method and achieve the best effect, at the same time looks clear and concise. With the least amount of code to achieve the best effect is the truth!


Trying to run a small white!!!!!!
  • Related