Javascript explains the operation instance of the drop down list box of select

This article is about javascript and the most basic methods related to select, for those unfamiliar with javascript reference. It's not uncommon for someone to come up with a form structure not only to design the logic for the program, to create the data structure, but to design the style of the form, and to be familiar with javascript; Some companies may require you to master photoshop: at first, we were all-rounders.

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

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

<script type="text/javascript"> 
<!-- 
var f = document.getElementById("f"); 
//Gets the number of items in the select list
document.write(f.s.options.length); 
document.write(f.s.length); 
//Index of the currently selected item (starting at 0) (there are two methods)
//If multiple items are selected, the index of the first selected item is returned
document.write(f.s.options.selectedIndex); 
document.write(f.s.selectedIndex); 
//Checks if an item is selected
document.write(f.s.options[0].selected); 
//Gets 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 a
f.s.options[f.s.options.length] = new Option(" additional text", " additional value"); 
//Change a
f.s.options[1] = new Option(" Changes in the text", " Changes in the value"); 
//You can also set the text and value of the item directly
//--> 
</script> 

//Select all items in the list
function SelectAllOption(list) 
{ 
for (var i=0; i<list.options.length; i++) 
{ 
list.options[i].selected = true; 
} 
} 

//Select the item in the list by jb51.net
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 the 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 the list
function ClearList(list) 
{ 
while (list.options.length > 0) 
{ 
list.options[0] = null; 
} 
} 

//Deletes the selected item from the list
//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 looks for the existence of the corresponding item
//RepeatCheck whether the repeatability is checked
//If it is "v", repeat by value check
//If it is "t", repeat value check by text
//If it is "vt", check for duplicate values by value and text
//Other values, not checked for repeatability, return false
function OptionExists(list, optText, optValue, repeatCheck) 
{ 
var i = 0; 
var find = false; 
if (repeatCheck == "v") 
{ 
//Repeat value checking by value
for (i=0; i<list.options.length; i++) 
{ 
if (list.options[i].value == optValue) 
{ 
find = true; 
break; 
} 
} 
} 
else if (repeatCheck == "t") 
{ 
//Double check by text
for (i=0; i<list.options.length; i++) 
{ 
if (list.options[i].text == optText) 
{ 
find = true; 
break; 
} 
} 
} 
else if (repeatCheck == "vt") 
{ 
//Double 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 find; 
} 

//Append an item to the list
//A list is a list to append
//OptText and optValue represent the text and value of the item, respectively
//RepeatCheck for repeatability checking, see OptionExists
//Adding returns true on success and false on failure
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 insert position, when insert position> = the number of existing items in the list is equivalent to an additional item that is not double-checked
//OptText and optValue represent the text and value of the 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 transfer an item from one list to another
//RepeatCheck for repeatability checking, see OptionExists
//DeleteSource deleteSource deleteSource deleteSource deleteSource deleteSource deleteSource deleteSource deleteSource
//Returns the number of items affected
function ListToList(sList, dList, repeatCheck, deleteSource) 
{ 
//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 a success
lines++; 
if (deleteSource) 
{ 
//Deletes an item from the source list
sList.options[i] = null; 
} 
else 
{ 
i++; 
} 
} 
else 
{ 
i++; 
} 
} 
return lines; 
} 

//Move the selected item up in the 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); 
} 
} 
} 

//The selected item in the list moves down
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); 
} 
} 
}