This article is mainly about the most basic methods related to javascript and select, for reference by people who are not familiar with javascript. A common situation is that the person who proposes the form structure not only needs to design logic for the program and create data structures, but also needs to design the style of the form and be familiar with javascript; some companies may require you to be proficient in photoshop: in the beginning, we all Be an all-rounder.
The following is the basis of our example; this is not a standard form.
<form id="f">
<select size="1" name="s">
<option value="VeVB.COm">Wulin.com</option>
<option value="baidu.com">Baidu</option>
</select>
</form>
-------------------------------------------------- --------------------------
Copy the code code as follows:
<script type="text/javascript">
<!--
var f = document.getElementById("f");
//Get the number of select list items
document.write(fsoptions.length);
document.write(fslength);
//The subscript of the currently selected item (starting from 0) (there are two methods)
//If multiple items are selected, return the subscript of the first selected item
document.write(fsoptions.selectedIndex);
document.write(fsselectedIndex);
//Check whether an item is selected
document.write(fsoptions[0].selected);
//Get the value and text of a certain item
document.write(fsoptions[0].value);
document.write(fsoptions[1].text);
//Delete an item
fsoptions[1] = null;
//Add an item
fsoptions[fsoptions.length] = new Option("Additional text", "Additional value");
//Change an item
fsoptions[1] = new Option("changed text", "changed value");
//You can also directly set the text and value of the item
//-->
</script>
//Select all items in the list
function SelectAllOption(list)
{
for (var i=0; i<list.options.length; i++)
{
list.options[i].selected = true;
}
}
//Reverse the selection of items in the list by VeVB.COm asp learning network
functionDeSelectOptions(list)
{
for (var i=0; i<list.options.length; i++)
{
list.options[i].selected = !list.options[i].selected;
}
}
//Return 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;
}
//Clear the list
function ClearList(list)
{
while (list.options.length > 0)
{
list.options[0] = null;
}
}
//Delete the selected item from the list
//Return 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 whether to perform repeatability check
//If it is "v", perform duplicate value check by value
//If it is "t", perform duplicate value check based on text
//If it is "vt", perform duplicate value check by value and text
//Other values, no repeatability check, returns 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 check by text
for (i=0; i<list.options.length; i++)
{
if (list.options[i].text == optText)
{
find = true;
break;
}
}
}
else if (repeatCheck == "vt")
{
//Duplicate 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
//list is the list to be appended
//optText and optValue represent the text and value of the item respectively
//repeatCheck whether to perform repeatability check, see OptionExists
//Returns true if added successfully, false if failed
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, when the insertion position >= the number of existing items in the list, its function is equivalent to appending items without repeated checking
//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);
}
//Export items from one list to another list
//repeatCheck whether to perform repeatability check, see OptionExists
//After deleteSource items are imported to the target, whether to delete the items in the source list
//Return the number of affected items
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))
{
//Added successfully
lines++;
if(deleteSource)
{
//Delete items from 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);
}
}
}
//Move the selected item down in the list
function MoveSelectedOptionsDown(list)
{
var i = 0;
var value = "";
var text = "";
for (i=list.options.length-1; i>0; i--)
{
//www.VeVB.COm
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);
}
}
}