Javascript Select operation Large Set _ form effects

In fact, this book has been in My computer, but not seriously read. has not been very formal study of JavaScript, occasionally use the time to find some code online, change it to use, this time from the beginning to learn, thin look down, there is a lot of harvest, and even a bit like JavaScript.
Now into the business, see the book in the form elements of the operation, such as TextBox, Button, label, etc., are still relatively simple, just see SELECT, a little more complicated, so want to study carefully, so there is this article. The operations of select include dynamically adding, deleting, moving, getting the values of the selected items, sorting, and so on, now one by one.
1. Add option to select

Copy Code code 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 option in select

Copy Code code as follows:

function Fnremoveitem ()
{
var seltarget = document.getElementById ("Selid");
if (Seltarget.selectedindex >-1)
{//Description selected
for (Var i=0;i<seltarget.options.length;i++)
{
if (seltarget.options[i].selected)
{
Seltarget.remove (i);
i = i-1;//Note this line
}
}
}
}

3. Move option in Select to another select

Copy Code code 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 the if can also be replaced with the following code

Copy Code code as follows:

var op = from.options[i];
To.options.add (New Option (Op.text, Op.value));
From.remove (i);

4, select option in the Move up and down

Copy Code code 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 start directly from I=1
if (sel.options[i].selected)
{
if (!sel.options.item (i-1). Selected)
{//One of the above is not selected, switch 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;
Sel.options[i-1].value = Selvalue;
Sel.options[i-1].selected=true;
}
}
}
}

The following code can also be used for the next two swaps, but the efficiency is low because each DOM operation will cause the entire page to be reordered, so it is better to modify the element's property values directly.

Copy Code code as follows:

var ooption = Sel.options[i]
var oprevoption = sel.options[i-1]
Sel.insertbefore (ooption,oprevoption);

Move down, empathy.

Copy Code code 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 go straight from the penultimate second
if (Sel.options.item (i). Selected)
{
if (!sel.options.item (i+1). Selected)
{//Option not selected below, swap 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, select the sort of option
This is done with the array object's Sort method, which accepts a function parameter that defines the algorithm logic to use when sorting in this function.
Array.Sort ([comparefunction]) Comparefunction accepts two parameters (P1,P2), and when the sort operation occurs, the array object passes two values at a time to compare ; Comparefunciton must return an integer value: When the return value is >0, P1 is ranked after P2; When the return value is <0, P1 is in front of the P2, and when the value =0 is returned, no action is made.
For example:

Copy Code code 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);
The result of the sort operation here is that the items in the Arr are sorted in ascending order from small to large.
If you change the fncompare into
if (a < b)
return 1;
if (a > B)
return-1;
return 0;
The result of the sort is sorted in descending order
OK, here's the sort of option in select
Because sort can be sorted by option value, or by text, which only shows the sort by value
function Sortitem ()
{
var sel = document.getElementById ("Selid");
var sellength = sel.options.length;
var arr = new Array ();
var arrlength;
Place all option into array
for (Var i=0;i<sellength;i++)
{
Arr[i] = sel.options[i];
}
Arrlength = Arr.length;
Arr.sort (Fnsortbyvalue);//Sort
Remove the original option first
while (sellength--)
{
Sel.options[sellength] = null;
}
Put the sorted option back in 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 are more options available for sorting, such as sorting the value value as an integer or string, and getting a different result. Space limit, not to do more introduction.
I write all of these operations in a file that works as shown