Collection of options operation methods in javascript Select tag_form effects

JavaScript operates the options collection in the Select tag
Let’s first look at these methods of the options collection:
options.add(option) method adds an option object to the collection;
options.remove(index) Method removes the specified item in the options collection;
options(index) or options.item(index) can obtain the specified item in the options collection through the index;

The javascript code is as follows:

var selectTag = null; //select tag
var OPTONLENGTH = 10; //Number of options filled each time
var colls = []; //Reference to select tag options

window.onload = function(){
selectTag = document.getElementById("SelectBox"); //Get the select tag
colls = selectTag.options; //Get the reference
//initSelectBox(); //Self-initialization select.options
};

//Use random numbers to fill select.options
function initSelectBox(){
var random = 0;
var optionItem = null;
var item = null;

if(colls.length > 0 && isClearOption()){
clearOptions(colls);
}

for(var i=0;i
random = Math.floor(Math.random()*9000) 1000;
item = new Option(random,random); //Created through the Option() constructor option object
selectTag.options.add(item); //Add to the options collection
}

watchState();
}
//Whether before adding a new option item Clear the current options
function isClearOption(){
return document.getElementById("chkClear").checked;
}
//Clear the options collection
function clearOptions(colls){
var length = colls.length;
for(var i=length-1;i>=0;i--){
colls.remove(i);
}
}
//Add a new option
function addOption(){
colls.add(createOption());
lastOptionOnFocus(colls.length-1);
watchState();
}
//Create an option object
function createOption(){
var random = Math.floor(Math.random()*9000) 1000;
return new Option(random,random);
}
//Delete an option specified in the options collection
function removeOption(index){
if(index >= 0){
colls.remove(index);
lastOptionOnFocus(colls.length-1);
}
watchState();
}
//Get the currently selected option index
function getSelectedIndex(){
return selectTag. selectedIndex;
}
//Get the total number of options collection
function getOptionLength(){
return colls.length;
}
//Get the currently selected option text
function getCurrentOptionValue(index){
if(index >= 0)
return colls(index).value;
}
//Get the currently selected option value
function getCurrentOptionText( index){
if(index >= 0)
return colls(index).text;
}
//Use the last item in the options collection to get focus
function lastOptionOnFocus(index) {
selectTag.selectedIndex = index;
}
//Show the select tag status
function watchState(){
var divWatch = document.getElementById("divWatch");
var innerHtml="";
innerHtml = "Total number of options:" getOptionLength();
innerHtml = "
Current item index:" getSelectedIndex();
innerHtml = "
Current item text :" getCurrentOptionText(getSelectedIndex());
innerHtml = "
Current item value:" getCurrentOptionValue(getSelectedIndex());
divWatch.innerHTML = innerHtml;
divWatch.align = "justify";
}

Notice that when creating the option item above, the Option() constructor is used. This constructor has two versions of overloads.
1. var option = new Option(text,value); // Capitalize Option() here
2. var option = new Option();
option.text = text;
option .value=value;
I personally prefer the first method to create option objects.
In addition, the select tag also has a more useful attribute called selectedIndex, through which it is possible to obtain the currently selected option index, or to specify which item in the options collection is selected through the index setting.
select.selectedIndex = select.options.length-1; //Select the last item in the options collection
var selectedItem = select.options(select.selectedIndex);//Get the currently selected item
selectedItem .text; //The text of the selected item
selectedItem.value; //The value of the selected item

---

---

Initialize SelectBox with random numbers

clear

---

Add option item

---

Delete option item

Check whether it is selected
if(objSelect.selectedIndex > -1) {
//Description is selected
} else {
//Description is not selected
}

Delete the selected item
objSelect.options[objSelect.selectedIndex ] = null;

Add item
objSelect.options[objSelect.length] = new Option("Hello","hello");

Modify the selected item
objSelect.options[objSelect.selectedIndex] = new Option("Hello","hello");

Get the text of the selected item
objSelect.options[objSelect.selectedIndex].text;

Get the value of the selected item
objSelect.options[objSelect.selectedIndex].value;