JavaScript explains _javascript tips for working with a Drop-down list box (select)

This article is primarily about the most basic methods associated with JavaScript and select for reference by people unfamiliar with JavaScript. The common scenario is that the person presenting the form structure needs not only to design logic for the program, to create data structures, but also to design the style of the form and to familiarize yourself with JavaScript; some companies may ask you to be proficient in Photoshop: At first we were all versatile.

Here is the basis for our example; This is not a standard form.

<form id= "F" >
<select size= "1" name= "S" >
<option value= "Jb51.net" > Cloud-dwelling Community </option>
<option value= "baidu.com" > Baidu </option>
</select>
</form>

---------------------------------------------------------------------------

Copy Code code as follows:

<script type= "Text/javascript" >
<!--
var f = document.getElementById ("f");

Get the number of select list items
document.write (f.s.options.length);
document.write (f.s.length);

Subscript for the currently selected item (starting from 0) (there are two ways)
If multiple items are selected, the subscript for the first selected item is returned
document.write (F.s.options.selectedindex);
document.write (F.s.selectedindex);

Detects whether an item is selected
document.write (f.s.options[0].selected);

Get the value and text of an item
document.write (F.s.options[0].value);
document.write (F.s.options[1].text);

Delete an item
F.S.OPTIONS[1] = null;

Append an item
F.s.options[f.s.options.length] = new Option ("appended text", "appended value");

Change one item
F.S.OPTIONS[1] = new Option ("changed text", "changed value");
You can also set the text and value of the item directly
-->
</script>

Items in a full selection list
function Selectalloption (list)
{
for (var i=0; i<list.options.length; i++)
{
List.options[i].selected = true;
}
}

Items in the inverse of the list by jb51.net ASP Learning Network
function Deselectoptions (list)
{
for (var i=0; i<list.options.length; i++)
{
list.options[i].selected =!list.options[i].selected;
}
}

Returns the number of selected items in a list
function getselectedoptionscnt (list)
{
var cnt = 0;
var i = 0;
for (i=0; i<list.options.length; i++)
{
if (list.options[i].selected)
{
cnt++;
}
}

return CNT;
}

Empty list
function Clearlist (list)
{
while (List.options.length > 0)
{
LIST.OPTIONS[0] = null;
}
}

Delete list Check
Returns the number of deleted items
function Delselectedoptions (list)
{
var i = 0;
var deletedcnt = 0;
while (I < list.options.length)
{
if (list.options[i].selected)
{
List.options[i] = null;
deletedcnt++;
}
Else
{
i++;
}
}

return deletedcnt;
}
This function finds whether the corresponding item exists
Repeatcheck Check for repeatability
If "V", duplicate values are checked by value
If "T", repeat values are checked by text
For "VT", duplicate values are checked by value and text
Other value, no repeat check, return false
function optionexists (list, Opttext, Optvalue, Repeatcheck)
{
var i = 0;
var find = false;

if (Repeatcheck = = "V")
{
Duplicate value check by value
for (i=0; i<list.options.length; i++)
{
if (List.options[i].value = = Optvalue)
{
find = true;
Break
}
}
}
else if (Repeatcheck = "T")
{
Repeat the check by text
for (i=0; i<list.options.length; i++)
{
if (List.options[i].text = = Opttext)
{
find = true;
Break
}
}
}
else if (Repeatcheck = "VT")
{
Repeat check by value and text
for (i=0; i<list.options.length; i++)
{
if ((List.options[i].value = = Optvalue) && (List.options[i].text = = Opttext))
{
find = true;
Break
}
}
}

return to find;
}

Append an item to the list
List is the one you want to append
Opttext and Optvalue represent the text and value of an item, respectively
Repeatcheck whether a repeat check is performed, see optionexists
Add success returns True, Failure returns false
function appendoption (list, Opttext, Optvalue, Repeatcheck)
{
if (! Optionexists (list, Opttext, Optvalue, Repeatcheck))
{
List.options[list.options.length] = new Option (Opttext, Optvalue);
return true;
}
Else
{
return false;
}
}

Insert Item
Index insertion position, which acts as an append without duplicate checking when the insertion position >= the number of existing items in the list
Opttext and Optvalue represent the text and value of an item, respectively
function insertoption (list, index, Opttext, Optvalue)
{
var i = 0;
for (i=list.options.length; i>index; i--)
{
List.options[i] = new Option (List.options[i-1].text, List.options[i-1].value);
}

List.options[index] = new Option (Opttext, Optvalue);
}
To guide an item in one list to another list
Repeatcheck whether a repeat check is performed, see optionexists
Whether to delete items from the source list after the Deletesource item is directed to the target
Returns the number of items affected
function Listtolist (slist, Dlist, Repeatcheck, Deletesource)
{
The number of rows affected
var lines = 0;
var i = 0;
while (I<slist.options.length)
{
if (slist.options[i].selected && appendoption (dlist, Slist.options[i].text, Slist.options[i].value, Repeatcheck))
{
Add success
lines++;
if (Deletesource)
{
Delete items from the source list
Slist.options[i] = null;
}
Else
{
i++;
}
}
Else
{
i++;
}
}

return lines;
}

Select Item up in list
function Moveselectedoptionsup (list)
{
var i = 0;
var value = "";
var text = "";
for (i=0; i< (list.options.length-1); i++)
{
if (!list.options[i].selected && list.options[i+1].selected)
{
value = List.options[i].value;
Text = List.options[i].text;
List.options[i] = new Option (List.options[i+1].text, List.options[i+1].value);
List.options[i].selected = true;
LIST.OPTIONS[I+1] = new Option (text, value);
}
}
}

Select Item down in list
function Moveselectedoptionsdown (list)
{
var i = 0;
var value = "";
var text = "";
for (i=list.options.length-1; i>0; i--)
{

Www.jb51.net
if (!list.options[i].selected && list.options[i-1].selected)
{
value = List.options[i].value;
Text = List.options[i].text;
List.options[i] = new Option (List.options[i-1].text, List.options[i-1].value);
List.options[i].selected = true;
LIST.OPTIONS[I-1] = new Option (text, value);
}
}
}