Large collection of Javascript Select operations_Form special effects

In fact, this book has always been on my computer, but I never read it carefully. I have never formally learned JavaScript. When I occasionally use it, I go to the Internet to find some code, modify it, and use it. This time I learned it from scratch. If I look carefully, I really have a lot of gains, even I kind of like javascript.
Now let’s get to the point. I saw in the book that the operations of Form elements, such as Textbox, Button, Label, etc., are relatively simple. But when I saw Select, it was a little more complicated, so I wanted to study it carefully, so So there is this article. Select operations include dynamic addition, deletion, movement, obtaining the value of the selected item, sorting, etc., and we will describe them one by one now.
1. Add Option to Select

Copy the code The 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 Option in Select

Copy code The code is as follows:

function fnRemoveItem()
{
var selTarget = document.getElementById("selID ");
if(selTarget.selectedIndex > -1)
{//Description selected
for(var i=0;i{
if(selTarget.options[i].selected)
{
selTarget.remove(i);
i = i - 1;//Pay attention to this line
}
}
}
}

3. Move the Option in Select to another Select

Copy code The code is as follows:

function fnMove(fromSelectID,toSelectID)
{
var from = document.getElementById(fromSelectID);
var to = document.getElementById(toSelectID);
for(var i=0;i{
if(from.options[i].selected)
{
to.appendChild(from.options[i]);
i = i - 1;
}
}
}

The code in if is also The following lines of code can be used to replace

Copy the code The code is as follows:

var op = from.options [i];
to.options.add(new Option(op.text, op.value));
from.remove(i);

4. Move up and down Option in Select

Copy code The code is as follows:

function fnUp( )
{
var sel = document.getElementById("selID");
for(var i=1; i < sel.length; i )
{//The top one is not It needs to be moved, so start directly from i=1
if(sel.options[i].selected)
{
if(!sel.options.item(i-1).selected)
{//The above item is not selected, swap 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;
}
}
}
}

When exchanging the upper and lower items, you can also use the following code, but the efficiency is very low because each Dom Any operation will cause the entire page to be re-layout, so it is better to modify the attribute value of the element directly.

Copy code The code is as follows:

var oOption = sel.options[i]
var oPrevOption = sel.options[i-1]
sel.insertBefore(oOption,oPrevOption);

Same as moving downwards

Copy code The 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 start directly from the second to last one
if(sel.options.item(i).selected)
{
if( !sel.options.item(i 1).selected)
{//The following Option is not selected, 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. Sorting of Options in Select
Here we use the sort method of the Array object to operate. The sort method accepts a function parameter, and the algorithm used for sorting can be defined in this function. logic.
array.sort([compareFunction]) The compareFunction accepts two parameters (p1, p2). When the sort operation is in progress, the array object will pass in two values ​​​​each time for comparison; compareFunciton must return an integer value: when When the return value is > 0, p1 will be ranked behind p2; when the return value is For example:

Copy code The 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);
//The result of the sort operation here is that the items in arr are in ascending order from small to large Sorting
//If you change fnCompare to
//if (a < b)
// return 1;
//if (a > b)
// return -1;
//return 0;
//The result of sort is in descending order
Okay, the following is the sorting of Option in Select
//Because sorting can be sorted by the Value of Option, You can also sort by Text, here we only demonstrate sorting by Value
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{
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 Select
for(i= 0;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 when sorting. For example, if the value is sorted as Integer or String, the results will be different. Due to space limitations, no further introduction is required.
I wrote all these operations in a file, and the running effect is as shown below