Detailed explanation of single-select and multiple-select usage of select tag in HTML_HTML/Xhtml_Web page production

The select element creates single-select or multiple-select menus. When the form is submitted, the browser submits the selected items, or collects multiple comma-separated options, combines them into a single parameter list, and includes the name attribute when submitting the form data to the server.

1. Basic usage:

Copy code

The code is as follows:

Volvo
Saab
Opel
Audi

Where, tag can be omitted and used in the page

Copy the code

The code is as follows:

All
Hubei TV University Online Learning Center
Chengdu Normal University Online Learning Center
Wuhan Vocational and Technical College Online Learning Center

2. The Select element can also be used for multiple selections, see the following code:

Copy code

The code is as follows:

//With the multiple attribute, you can select multiple times

High School
College
Ph.D.< ;/option> High School
College
Ph.D.< ;/option>

//The following is the case where the size attribute is set. If size = 3, then three pieces of data will be displayed. Note that multiple selections are not allowed.

Elementary school
Junior high school
High school
Technical secondary school
College
Undergraduate

Ph.D.
Postdoctoral fellow
< option selected>Please select



3. All common operations involved in the multi-select Select component:

1. Determine the select option Whether there is an Item with the specified value in

Copy code

The code is as follows: @param objSelectId The id of the target select component to be verified

@param objItemValue The value to be verified for existence

function isSelectItemExit(objSelectId,objItemValue) {

var objSelect = document.getElementById(objSelectId);
var isExit = false;
if (null != objSelect && typeof(objSelect) != "undefined") {
for(var i=0;iif( objSelect.options[i].value == objItemValue) {
isExit = true;
break;
}
}
}
return isExit;
}


2. Add an Item to the select option

Copy the code

The code is as follows:

@param objSelectId The id of the target select component to be added to the item
@param objItemText The content of the item to be added
@param objItemValue 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 value is item already exists in the select
if(isSelectItemExit(objSelectId,objItemValue)) {
$.messager.alert('Prompt message','The option with 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, supporting multiple selection and multiple deletion

Copy the code

The code is as follows:

@param objSelectId The target select component id to be deleted
function removeSelectItemsFromSelect(objSelectId) {
var objSelect = document.getElementById(objSelectId);
var delNum = 0;
if (null != objSelect && typeof(objSelect) != "undefined") {
for(var i=0;iif(objSelect .options[i].selected) {
objSelect.options.remove(i);
delNum = delNum 1;
i = i - 1;
}
}
if (delNum <= 0 ) {
$.messager.alert('Message', 'Please select the option you want to delete!', 'info');
} else {
$.messager .alert('prompt message',''delNum' options were successfully deleted!','info');
}
}
}

4. From select Delete an Item according to the specified value in the option

Copy the code

The code is as follows:

@param objSelectId The id of the target select component to be verified
@param objItemValue The value to be verified for existence
function removeItemFromSelectByItemValue(objSelectId,objItemValue) {
var objSelect = document.getElementById(objSelectId);
if (null != objSelect && typeof(objSelect) != "undefined") {
//Determine 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('Message','Deleted successfully!','info');
} else {
$.messager.alert('Message','No There are options with specified values!','info');
}
}
}

5. Clear all options in select

Copy code

The code is as follows:

@param objSelectId The target select component id to be cleared
function clearSelect( objSelectId) {
var objSelect = document.getElementById(objSelectId);
if (null != objSelect && typeof(objSelect) != "undefined") {
for(var i=0;iobjSelect.options.remove(i);
}
}
}

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

Copy the code

The code is as follows:

@param objSelectId target select component id
@return the values ​​of all items in select, 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 selected options in one select to another select

Copy the code

The code is as follows :

@param fromObjSelectId The original select component id of the moved item
@param toObjectSelectId The target select component id that the moved 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;iif(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 to another select

Copy the code

The code is as follows:

@param fromObjSelectId The original select component id of the moved item
@param toObjectSelectId The target select component id that the moved item will enter
function moveAllToAnotherSelectObject(fromObjSelectId, toObjectSelectId) {
var objSelect = document.getElementById(fromObjSelectId);
if (null != objSelect) {
for(var i=0;iaddOneItemToSelect(toObjectSelectId,objSelect.options[i].text ,objSelect.options[i].value)
objSelect.options.remove(i);
i = i - 1;
}
}
}