Actually, this book has always been on my computer, but I haven't read it carefully. I haven't learned JavaScript very formally. When I occasionally use it, I go to the Internet to find some code, and then use it. This time I started learning it from scratch. After careful reading, I really gained a lot. I even liked JavaScript.
Now that I have come to the topic, I see that the operation of Form elements in the book, such as Textbox, Button, Label, etc., are relatively simple. But when I see Select, it is a little complicated, so I want to study it carefully, so I have this article. Select operations include dynamic addition, deletion, movement, obtaining selected items' values, sorting, etc., which are now discussed one by one.
1. Add Option to Select
//IE only, FF does not support the Add method
function fnAddItem(text,value)
{
var selTarget = ("selID");
(new Option("text","value"));
}
//IE FF both OK
function fnAdd(oListbox, sName, sValue)
{
var oOption = ("option");
((sName));
if ( == 3)
{
("value", sValue);
}
(oOption);
}
2. Delete the Option in Select
function fnRemoveItem()
{
var selTarget = ("selID");
if( > -1)
{//Select
for(var i=0;i<;i++)
{
if([i].selected)
{
(i);
i = i - 1;// Pay attention to this line
}
}
}
}
3. Move the Option in the Select to another Select
function fnMove(fromSelectID,toSelectID)
{
var from = (fromSelectID);
var to = (toSelectID);
for(var i=0;i<;i++)
{
if([i].selected)
{
([i]);
i = i - 1;
}
}
}
The code in if can also be replaced by the following code
var op = [i];
(new Option(, ));
(i);
4. The up and down movement of Option in Select
function fnUp()
{
var sel = ("selID");
for(var i=1; i < ; i++)
{//The top one does not need to be moved, so start directly from i=1
if([i].selected)
{
if(!(i-1).selected)
{//The above item is not selected, exchange it up and down
var selText = [i].text;
var selValue = [i].value;
[i].text = [i-1].text;
[i].value = [i-1].value;
[i].selected = false;
[i-1].text = selText;
[i-1].value = selValue;
[i-1].selected=true;
}
}
}
}
When exchanging the upper and lower items, the following code can also be used, but the efficiency is very inefficient, because each Dom operation will cause the entire page to be re-layout, so it is better to directly modify the attribute value of the element.
var oOption = [i]
var oPrevOption = [i-1]
(oOption,oPrevOption);
Move down the same
function fnDown()
{
var sel = fnGetTarget("selLeftOrRight");
for(var i= -2; i >= 0; i--)
{//Move down, the last one does not need to be processed, so start directly from the second to last one
if((i).selected)
{
if(!(i+1).selected)
{//The following Option is not selected, the upper and lower parts are swapped
var selText = (i).text;
var selValue = (i).value;
(i).text = (i+1).text;
(i).value = (i+1).value;
(i).selected = false;
(i+1).text = selText;
(i+1).value = selValue;
(i+1).selected=true;
}
}
}
}
5. Order of Option in Select
Here, the operation is done by the sort method of the Array object. The sort method accepts a function parameter, which can define the algorithm logic used when sorting in this function.
([compareFunction]) The compareFunction accepts two parameters (p1, p2). When the sort operation is in progress, the array object will pass two values in each time for comparison; compareFunciton must return an integer value: when the return value > 0, p1 will be ranked behind p2; when the return value < 0, p1 will be ranked before p2; when the return value = 0, no operation is performed.
For example:
function fnCompare(a,b)
{
if (a < b)
return -1;
if (a > b)
return 1;
return 0;
}
var arr = new Array();
//add some value into arr
(fnCompare);
//The result of sort operation here is that the items in arr are sorted in ascending order from small to large
//If you change fnCompare to
//if (a < b)
// return 1;
//if (a > b)
// return -1;
//return 0;
//The result of sort is sort sorting in descending order
OK, here is the sorting of Options in Select
//Because the sort can be sorted by the Value of Option or by Text, here only the sort by Value is demonstrated here
function sortItem()
{
var sel = ("selID");
var selLength = ;
var arr = new Array();
var arrLength;
//Put all Options into array
for(var i=0;i<selLength;i++)
{
arr[i] = [i];
}
arrLength = ;
(fnSortByValue);//Sort
//Delete the original Option first
while(selLength--)
{
[selLength] = null;
}
//Put the sorted Option back into Select
for(i=0;i<arrLength;i++)
{
fnAdd(sel,arr[i].text,arr[i].value);
//(new Option(arr[i].text,arr[i].value));
}
}
function fnSortByValue(a,b)
{
var aComp = ();
var bComp = ();
if (aComp < bComp)
return -1;
if (aComp > bComp)
return 1;
return 0;
}
There are more options when sorting, such as sorting the value as Integer or String, and the results are different. The space limitation is not to introduce it.
I wrote all these operations in a file, and the effect of the operation is as shown in the picture
Now that I have come to the topic, I see that the operation of Form elements in the book, such as Textbox, Button, Label, etc., are relatively simple. But when I see Select, it is a little complicated, so I want to study it carefully, so I have this article. Select operations include dynamic addition, deletion, movement, obtaining selected items' values, sorting, etc., which are now discussed one by one.
1. Add Option to Select
Copy the codeThe code is as follows:
//IE only, FF does not support the Add method
function fnAddItem(text,value)
{
var selTarget = ("selID");
(new Option("text","value"));
}
//IE FF both OK
function fnAdd(oListbox, sName, sValue)
{
var oOption = ("option");
((sName));
if ( == 3)
{
("value", sValue);
}
(oOption);
}
2. Delete the Option in Select
Copy the codeThe code is as follows:
function fnRemoveItem()
{
var selTarget = ("selID");
if( > -1)
{//Select
for(var i=0;i<;i++)
{
if([i].selected)
{
(i);
i = i - 1;// Pay attention to this line
}
}
}
}
3. Move the Option in the Select to another Select
Copy the codeThe code is as follows:
function fnMove(fromSelectID,toSelectID)
{
var from = (fromSelectID);
var to = (toSelectID);
for(var i=0;i<;i++)
{
if([i].selected)
{
([i]);
i = i - 1;
}
}
}
The code in if can also be replaced by the following code
Copy the codeThe code is as follows:
var op = [i];
(new Option(, ));
(i);
4. The up and down movement of Option in Select
Copy the codeThe code is as follows:
function fnUp()
{
var sel = ("selID");
for(var i=1; i < ; i++)
{//The top one does not need to be moved, so start directly from i=1
if([i].selected)
{
if(!(i-1).selected)
{//The above item is not selected, exchange it up and down
var selText = [i].text;
var selValue = [i].value;
[i].text = [i-1].text;
[i].value = [i-1].value;
[i].selected = false;
[i-1].text = selText;
[i-1].value = selValue;
[i-1].selected=true;
}
}
}
}
When exchanging the upper and lower items, the following code can also be used, but the efficiency is very inefficient, because each Dom operation will cause the entire page to be re-layout, so it is better to directly modify the attribute value of the element.
Copy the codeThe code is as follows:
var oOption = [i]
var oPrevOption = [i-1]
(oOption,oPrevOption);
Move down the same
Copy the codeThe code is as follows:
function fnDown()
{
var sel = fnGetTarget("selLeftOrRight");
for(var i= -2; i >= 0; i--)
{//Move down, the last one does not need to be processed, so start directly from the second to last one
if((i).selected)
{
if(!(i+1).selected)
{//The following Option is not selected, the upper and lower parts are swapped
var selText = (i).text;
var selValue = (i).value;
(i).text = (i+1).text;
(i).value = (i+1).value;
(i).selected = false;
(i+1).text = selText;
(i+1).value = selValue;
(i+1).selected=true;
}
}
}
}
5. Order of Option in Select
Here, the operation is done by the sort method of the Array object. The sort method accepts a function parameter, which can define the algorithm logic used when sorting in this function.
([compareFunction]) The compareFunction accepts two parameters (p1, p2). When the sort operation is in progress, the array object will pass two values in each time for comparison; compareFunciton must return an integer value: when the return value > 0, p1 will be ranked behind p2; when the return value < 0, p1 will be ranked before p2; when the return value = 0, no operation is performed.
For example:
Copy the codeThe code is as follows:
function fnCompare(a,b)
{
if (a < b)
return -1;
if (a > b)
return 1;
return 0;
}
var arr = new Array();
//add some value into arr
(fnCompare);
//The result of sort operation here is that the items in arr are sorted in ascending order from small to large
//If you change fnCompare to
//if (a < b)
// return 1;
//if (a > b)
// return -1;
//return 0;
//The result of sort is sort sorting in descending order
OK, here is the sorting of Options in Select
//Because the sort can be sorted by the Value of Option or by Text, here only the sort by Value is demonstrated here
function sortItem()
{
var sel = ("selID");
var selLength = ;
var arr = new Array();
var arrLength;
//Put all Options into array
for(var i=0;i<selLength;i++)
{
arr[i] = [i];
}
arrLength = ;
(fnSortByValue);//Sort
//Delete the original Option first
while(selLength--)
{
[selLength] = null;
}
//Put the sorted Option back into Select
for(i=0;i<arrLength;i++)
{
fnAdd(sel,arr[i].text,arr[i].value);
//(new Option(arr[i].text,arr[i].value));
}
}
function fnSortByValue(a,b)
{
var aComp = ();
var bComp = ();
if (aComp < bComp)
return -1;
if (aComp > bComp)
return 1;
return 0;
}
There are more options when sorting, such as sorting the value as Integer or String, and the results are different. The space limitation is not to introduce it.
I wrote all these operations in a file, and the effect of the operation is as shown in the picture