Details about multiple select tags in HTML

You can create one or more select menus for the select element. When submitting a form, the browser submits the selected project, or collects multiple options separated by commas to combine them into a separate parameter list, the name attribute is included when the <select> form data is submitted to the server.

I. Basic usage:
<Select>
<Option value = "volvo"> Volvo </option>
<Option value = "saab"> Saab </option>
<Option value = "opel"> Opel </option>
<Option value = "audi"> Audi </option>
</Select>
The </option> label can be removed and used on the page
<Select name = "studyCenter" id = "studyCenter" SIZE = "1">
<Option value = "0"> All
<Option value = "1"> Hubei TV University Network Learning Center
<Option value = "2"> Network Learning Center of Chengdu Normal University
<Option value = "3"> Network Learning Center of Wuhan Vocational and Technical College
</SELECT>
2. You can Select multiple Select elements. See the following code:
// If the multiple attribute is available, 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>

// The multiple attribute is not shown below. Only one row is displayed. You cannot select multiple attributes.
<Select name = "education" id = "education">
<Option value = "1"> high school </option>
<Option value = "2"> university </option>
<Option value = "3"> doctor </option>
</Select>
// The following figure shows the setting of the size attribute. If the size is 3, three data items are displayed. Note that you cannot select multiple data items.
<Select name = "education" id = "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 student </option>
<Option value = "7"> PhD </option>
<Option value = "8"> postdoc </option>
<Option selected> select </option>
</Select>
 
III. All common operations involved in multiple Select components:
1. Determine whether the specified Item exists in the select option
@ Param objSelectId 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; I <objSelect. options. length; I ++ ){
If (objSelect. options [I]. value = objItemValue ){
IsExit = true;
Break;
}
}
}
Return isExit;
}
2. add an Item to the select option
@ Param objSelectId id of the target select component to be added to the item
@ Param objItemText the display 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 item with this value already exists in select
If (isSelectItemExit (objSelectId, objItemValue )){
$. Messager. alert ('message message', 'this value option already exists! ', 'Info ');
} Else {
Var varItem = new Option (objItemText, objItemValue );
ObjSelect. options. add (varItem );
}
}
}
3. Delete selected items from the select option. You can select multiple items or delete multiple items.
@ Param objSelectId 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 ('message message', 'select the option you want to delete! ', 'Info ');
} Else {
$. Messager. alert ('message message', 'deleted successfully '+ delNum +' options! ', 'Info ');
}
}
}
4. delete an Item from the select option according to the specified value
@ Param objSelectId 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 the object 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 message', 'deleted successfully! ', 'Info ');
} Else {
$. Messager. alert ('message message', 'option with no specified value exists! ', 'Info ');
}
}
}
5. Clear all options in the select statement.
@ Param objSelectId 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. Obtain all items in the select statement and assemble all values into a string. The values are separated by commas (,).
@ Param objSelectId target select component id
@ Return the values of all items in select. Values are 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 statement to another select statement.
@ Param fromObjSelectId move the original select component id of the item
@ Param toObjectSelectId move the id of the target select component 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 the options in one select statement to another select statement.
@ Param fromObjSelectId move the original select component id of the item
@ Param toObjectSelectId move the id of the target select component 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;
}
}
}