A detailed explanation of the usage of select tags in HTML

Time:2020-2-11

Select element to create a single or multiple selection menu. When the form is submitted, the browser submits the selected items, or collects multiple options separated by commas, synthesizes them into a separate parameter list, and includes the name attribute when submitting the < Select > form data to the server.

1、 Basic usage:

Copy code

The code is as follows:

<select>
<option value =”volvo”>Volvo</option>
<option value =”saab”>Saab</option>
<option value=”opel”>Opel</option>
<option value=”audi”>Audi</option>
</select>

Among them, the < / option > tag can be omitted and used in the page

Copy code

The code is as follows:

<SELECT NAME=”studyCenter” SIZE=”1″>
< option value = “0” > all
< option value = “1” > Hubei TV University Network Learning Center
< option value = “2” > online learning center of Chengdu Normal University
< option value = “3” > Network Learning Center of Wuhan vocational and Technical College
</SELECT>

2、 You can also select multiple select elements, as shown in the following code:

Copy code

The code is as follows:

//With multiple attribute, you can select multiple
<select name= “education” id=”education” multiple=”multiple”>
< option value = “1” > high school < / option >
< option value = “2” > University < / option >
< option value = “3” > doctor < / option >
</select>
//There is no multiple attribute below. Only one attribute is displayed. Multiple selections are not allowed
<select name= “education” id=”education” >
< option value = “1” > high school < / option >
< option value = “2” > University < / option >
< option value = “3” > doctor < / option >
</select>
//Here is the setting of size attribute. If size = 3, three pieces of data will be displayed. Please note that you cannot select more than one.
<select name=”education” size=’3′>
< option value = “0” > primary school < / option >
< option value = “1” > junior high school < / option >
< option value = “2” > high school < / option >
< option value = “3” > technical secondary school < / option >
< option value = “4” > junior college < / option >
< option value = “5” > undergraduate < / option >
< option value = “6” > graduate students < / option >
< option value = “7” > doctor < / option >
< option value = “8” > postdoctoral < / option >
< option selected > please select < / option >
</select>

3、 All common operations involved in multi select component:

1. Judge whether there is an item with the specified value in the select option

Copy code

The code is as follows:

@Param objselectid the ID of the target select component to be validated
@Param objitemvalue the value that will verify whether it exists
function isSelectItemExit(objSelectId,objItemValue) {
var objSelect = document.getElementById(objSelectId);
var isExit = false;
if (null != objSelect && typeof(objSelect) != “undefined”) {
for(var i=0;i<objSelect.options.length;i++) {
if(objSelect.options[i].value == objItemValue) {
isExit = true;
break;
}
}
}
return isExit;
}

2. Add an item to the select option

Copy code

The code is as follows:

@Param objselectid the ID of the target select component to be added to the item
@Display content of item to be added by param obqitemtext
@Param obkitemvalue the value of the item to be added
function addOneItemToSelect(objSelectId,objItemText,objItemValue) {
var objSelect = document.getElementById(objSelectId);
if (null != objSelect && typeof(objSelect) != “undefined”) {
//Determine whether the item with this value already exists in select
if(isSelectItemExit(objSelectId,objItemValue)) {
$. Messager. Alert (‘prompt message ‘,’ option of this value already exists! ‘,’info’);
} else {
var varItem = new Option(objItemText,objItemValue);
objSelect.options.add(varItem);
}
}
}

3. Delete the selected item from the select option. Multiple selections and multiple deletions are supported

Copy code

The code is as follows:

@Param objselectid the ID of the target select component to be deleted
function removeSelectItemsFromSelect(objSelectId) {
var objSelect = document.getElementById(objSelectId);
var delNum = 0;
if (null != objSelect && typeof(objSelect) != “undefined”) {
for(var i=0;i<objSelect.options.length;i=i+1) {
if(objSelect.options[i].selected) {
objSelect.options.remove(i);
delNum = delNum + 1;
i = i – 1;
}
}
if (delNum <= 0 ) {
$. Messager. Alert (‘prompt message ‘,’ please select the option you want to delete! ‘,’info’);
} else {
$. Messager. Alert (‘prompt message ‘,’ successfully deleted ‘+ delnum +’ options! ‘,’info’);
}
}
}

4. Delete an item according to the specified value from the select option

Copy code

The code is as follows:

@Param objselectid the ID of the target select component to be validated
@Param objitemvalue the value that will verify whether it exists
function removeItemFromSelectByItemValue(objSelectId,objItemValue) {
var objSelect = document.getElementById(objSelectId);
if (null != objSelect && typeof(objSelect) != “undefined”) {
//Judge whether it exists
if(isSelectItemExit(objSelect,objItemValue)) {
for(var i=0;i<objSelect.options.length;i++) {
if(objSelect.options[i].value == objItemValue) {
objSelect.options.remove(i);
break;
}
}
$. Messager. Alert (‘prompt message ‘,’ successfully deleted! ‘,’info’);
} else {
$. Messager. Alert (‘prompt message ‘,’ option with specified value does not exist! ‘,’info’);
}
}
}

5. Clear all options in select

Copy code

The code is as follows:

@Param objselectid the ID of the target select component to be cleared
function clearSelect(objSelectId) {
var objSelect = document.getElementById(objSelectId);
if (null != objSelect && typeof(objSelect) != “undefined”) {
for(var i=0;i<objSelect.options.length;) {
objSelect.options.remove(i);
}
}
}

6. Get all items in select, and assemble all values into a string, separated by commas

Copy code

The code is as follows:

@Param objselectid target select component ID
@Return select the values of all items, separated by commas
function getAllItemValuesByString(objSelectId) {
var selectItemsValuesStr = “”;
var objSelect = document.getElementById(objSelectId);
if (null != objSelect && typeof(objSelect) != “undefined”) {
var length = objSelect.options.length
for(var i = 0; i < length; i = i + 1) {
if (0 == i) {
selectItemsValuesStr = objSelect.options[i].value;
} else {
selectItemsValuesStr = selectItemsValuesStr + “,” + objSelect.options[i].value;
}
}
}
return selectItemsValuesStr;
}

7. Move all the selected options in one select to another

Copy code

The code is as follows:

@Param from objselectid move item’s original select component ID
@Param tobjectselectid move the target select component ID that the item will enter
function moveAllSelectedToAnotherSelectObject(fromObjSelectId, toObjectSelectId) {
var objSelect = document.getElementById(fromObjSelectId);
var delNum = 0;
if (null != objSelect && typeof(objSelect) != “undefined”) {
for(var i=0;i<objSelect.options.length;i=i+1) {
if(objSelect.options[i].selected) {
addOneItemToSelect(toObjectSelectId,objSelect.options[i].text,objSelect.options[i].value)
objSelect.options.remove(i);
i = i – 1;
}
}
}
}

8. Move all options in one select to another

Copy code

The code is as follows:

@Param from objselectid move item’s original select component ID
@Param tobjectselectid move the target select component ID that the item will enter
function moveAllToAnotherSelectObject(fromObjSelectId, toObjectSelectId) {
var objSelect = document.getElementById(fromObjSelectId);
if (null != objSelect) {
for(var i=0;i<objSelect.options.length;i=i+1) {
addOneItemToSelect(toObjectSelectId,objSelect.options[i].text,objSelect.options[i].value)
objSelect.options.remove(i);
i = i – 1;
}
}
}

Recommended Today

The meaning of GIT head / head ^ / head ~

HEAD HEADThat points to the latest submitted to the warehouse by the current branchcommit #Redo staging with latest commit git reset HEAD — filename #Redo staging with latest commit和工作区 git reset –hard HEAD #Roll back the commit log once, and the staging and workspace codes remain unchanged git reset –soft HEAD~1 HEAD~{n} ~It’s used inCurrent […]