Large set of Javascript Select operations

In fact, this book has been in my computer, but I have never read it carefully. I have never learned javascript very officially. I will go to the Internet to find some code when I use it occasionally. Let's change it and use it. I will learn it from the beginning and take a closer look, I really have a lot of gains, and even like javascript.
Now let's proceed to the topic. We can see that the operations on Form elements in the book, such as Textbox, Button, and Label, are still relatively simple, but it is a little complicated when we see the Select statement, so I wanted to study it carefully, so I had this article. Select operations include dynamic addition, deletion, moving, obtaining the value and sorting of the selected items.
1. Add Option to Select
Copy codeThe Code is as follows:
// IE only, FF does not support the Add Method
Function fnAddItem (text, value)
{
Var selTarget = document. getElementById ("selID ");
SelTarget. Add (new Option ("text", "value "));
}
// Ie ff both OK
Function fnAdd (oListbox, sName, sValue)
{
Var oOption = document. createElement ("option ");
OOption. appendChild (document. createTextNode (sName ));
If (arguments. length = 3)
{
OOption. setAttribute ("value", sValue );
}
OListbox. appendChild (oOption );
}

2. Delete the Option in the Select statement.
Copy codeThe Code is as follows:
Function fnRemoveItem ()
{
Var selTarget = document. getElementById ("selID ");
If (selTarget. selectedIndex>-1)
{// Specifies the selected
For (var I = 0; I <selTarget. options. length; I ++)
{
If (selTarget. options [I]. selected)
{
SelTarget. remove (I );
I = I-1; // pay attention to this line
}
}
}
}

3. Move the Option in the Select statement to another Select statement.
Copy codeThe Code is as follows:
Function fnMove (fromSelectID, toSelectID)
{
Var from = document. getElementById (fromSelectID );
Var to = document. getElementById (toSelectID );
For (var I = 0; I <from. options. length; I ++)
{
If (from. options [I]. selected)
{
To. appendChild (from. options [I]);
I = I-1;
}
}
}

The code in if can also be replaced by the following code:
Copy codeThe Code is as follows:
Var op = from. options [I];
To. options. add (new Option (op. text, op. value ));
From. remove (I );

4. Move options up and down in the Select statement
Copy codeThe Code is as follows:
Function fnUp ()
{
Var sel = document. getElementById ("selID ");
For (var I = 1; I <sel. length; I ++)
{// The top one does not need to be moved, so it starts directly from I = 1.
If (sel. options [I]. selected)
{
If (! Sel. options. item (I-1). selected)
{// The above item is not selected and is exchanged up and down
Var selText = sel. options [I]. text;
Var selValue = sel. options [I]. value;
Sel. options [I]. text = sel. options [I-1]. text;
Sel. options [I]. value = sel. options [I-1]. value;
Sel. options [I]. selected = false;
Sel. options [I-1]. text = selText;
I-1. options []. value = selValue;
I-1. options []. selected = true;
}
}
}
}

The following code can also be used for swap between the two items, but the efficiency is very low, because every Dom operation will lead to the re-layout of the entire page, therefore, it is better to directly modify the attribute values of an element.
Copy codeThe Code is as follows:
Var oOption = sel. options [I]
Var oPrevOption = sel. options [I-1]
Sel. insertBefore (oOption, oPrevOption );

Same as moving down
Copy codeThe Code is as follows:
Function fnDown ()
{
Var sel = fnGetTarget ("selLeftOrRight ");
For (var I = sel. length-2; I> = 0; I --)
{// Move down. The last one does not need to be processed, so it starts directly from the second to the last one.
If (sel. options. item (I). selected)
{
If (! Sel. options. item (I + 1). selected)
{// The options below are not selected, and they are swapped up and down.
Var selText = sel. options. item (I). text;
Var selValue = sel. options. item (I). value;
Sel. options. item (I). text = sel. options. item (I + 1). text;
Sel. options. item (I). value = sel. options. item (I + 1). value;
Sel. options. item (I). selected = false;
Sel. options. item (I + 1). text = selText;
Sel. options. item (I + 1). value = selValue;
Sel. options. item (I + 1). selected = true;
}
}
}
}

5. Sort options in Select
Here, the sort method of the Array object is used for operations. The sort method accepts a function parameter and can define the algorithm logic used for sorting in this function.
Array. in sort ([compareFunction]), compareFunction accepts two parameters (p1, p2). During the sort operation, the array object uploads two values each time for comparison. compareFunciton must return an integer: when the return value is greater than 0, p1 is placed behind p2; when the return value is <0, p1 is placed before p2; when the return value is 0, no operation is performed.
For example:
Copy 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
Arr. sort (fnCompare );
// Here, the sort operation result is that the items in arr are sorted in ascending order from small to large.
// If you change fnCompare
// If (a <B)
// Return 1;
// If (a> B)
// Return-1;
// Return 0;
// The result of sort is sorted in descending order.
Okay. Here is the sort of options in the Select statement.
// Because sorting can be performed by Option Value or by Text, only sorting by Value is demonstrated here.
Function sortItem ()
{
Var sel = document. getElementById ("selID ");
Var selLength = sel. options. length;
Var arr = new Array ();
Var arrLength;
// Put all options into array
For (var I = 0; I <selLength; I ++)
{
Arr [I] = sel. options [I];
}
ArrLength = arr. length;
Arr. sort (fnSortByValue); // sort
// Delete the original Option first
While (selLength --)
{
Sel. options [selLength] = null;
}
// Put the sorted Option back into the Select
For (I = 0; I <arrLength; I ++)
{
FnAdd (sel, arr [I]. text, arr [I]. value );
// Sel. add (new Option (arr [I]. text, arr [I]. value ));
}
}
Function fnSortByValue (a, B)
{
Var aComp = a. value. toString ();
Var bComp = B. value. toString ();
If (aComp <bComp)
Return-1;
If (aComp> bComp)
Return 1;
Return 0;
}

There can also be more options for sorting. For example, you can sort the value as an Integer or String and the results are different. Length restrictions.
I wrote all these operations in a file and the running effect