Detailed description of multiple choice of select tags in HTML _ HTML/Xhtml _ webpage Creation

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, the following example shows how to use the select element to create a single-choice or multiple-choice menu. When you submit 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 form data is submitted to the server.I. Basic usage: The Code is as follows:
Volvo
Saab
Opel
Audi

Where,Labels can be removed and used on the page

The Code is as follows:

AllHubei TV University Network Learning CenterNetwork Learning Center of Chengdu Normal UniversityNetwork Learning Center of Wuhan Vocational and Technical College

2. You can Select multiple Select elements. See the following code:

The Code is as follows:

// If the multiple attribute is available, you can select multiple
High School University Doctor
// The multiple attribute is not shown below. Only one row is displayed. You cannot select multiple attributes.
High School University Doctor
// 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.
Primary School Junior High School High School Technical Secondary School Junior college Bachelor Graduate Student Doctor Postdoctoral Select

III. All common operations involved in multiple Select components:

1. Determine whether the specified Item exists in the select option

The Code is as follows:

@ 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 If (objSelect. options [I]. value = objItemValue ){
IsExit = true;
Break;
}
}
}
Return isExit;
}

2. add an Item to the select option

The Code is as follows:

@ 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.

The Code is as follows:

@ 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 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

The Code is as follows:

@ 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 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.

The Code is as follows:

@ 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. remove (I );
}
}
}

6. Obtain all items in the select statement and assemble all values into a string. The values are separated by commas (,).

The Code is as follows:

@ 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.

The Code is as follows:

@ 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 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.

The Code is as follows:

@ 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 AddOneItemToSelect (toObjectSelectId, objSelect. options [I]. text, objSelect. options [I]. value)
ObjSelect. options. remove (I );
I = I-1;
}
}
}