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);
}
}
}