In HTML Select tab multiple selection

The Select element creates a single-or multiple-selection menu. When a form is submitted, the browser submits the selected item, or collects multiple options separated by commas, synthesizes it with a separate argument list, and includes the Name property when the <select> form data is submitted to the Server.

first, Basic Usage:

<select>

<option value = "volvo" >Volvo</option>

<option value = "saab" >Saab</option>

<option value= "opel" >Opel</option>

<option value= "audi" >Audi</option>

</select>

Where,</option> tags can be omitted, in the page usage

<select name="studycenter" id="studycenter " size="1">

<option value="0"> All

<option value="1"> Hubei rtvu Network Learning Center

<option value="2"> Chengdu Normal University Network Learning Center

<option value="3"> Wuhan Vocational and Technical College Network Learning Center

</SELECT>

second, Select elements can also be multi-select, see the following code:

With the 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" > PhD </option>
</select>

There is no multiple property below, only one bar is displayed, not multiple selections
<select name= "education" id= "education" >
<option value= "1" > High School </option>
<option value= "2" > University </option>
<option value= "3" > PhD </option>
</select>
The following is the case where the Size property is set, and if size = 3 then three data is displayed, Note that you cannot select more than One.
<select name= "education" id= "education" size= ' 3 ' >
<option value= "0" > Primary </option>
<option value= "1" > Junior </option>
<option value= "2" > High School </option>
<option value= "3" > Secondary School </option>
<option value= "4" > Junior College </option>
<option value= "5" > Undergraduate </option>
<option value= "6" > Postgraduate </option>
<option value= "7" > PhD </option>
<option value= "8" > Postdoctoral </option>
<option selected> Please select </option>
</select>

three, The Multiple-select Select component involves all common operations:

1. Determine if the item with the specified value exists in the Select option

@param objselectid The ID of the target Select component that will be validated

@param Objitemvalue is going to verify the existence of the value

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 The ID of the target Select component that will be added to the item
@param objitemtext What will be added to the item displayed
@param objitemvalue The value of the item that will be added

function Addoneitemtoselect (objselectid,objitemtext,objitemvalue) {
var objselect = document.getElementById (objselectid);
If (null! = Objselect && typeof (objselect)! = "undefined") {
Determines whether the value of item already exists in select
If (isselectitemexit (objselectid,objitemvalue)) {
$.messager.alert (' hint message ', ' option for this value already exists! ', ' info ');
} else {
var varitem = new Option (objitemtext,objitemvalue);
ObjSelect.options.add (varitem);
}
}
}

3. Remove the selected item from the Select option to support multiple-choice multiple-deletion

@param objselectid The target Select Component ID that will 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 (' hint Message ', ' Please select the option you want to delete! ', ' info ');
} else {
$.messager.alert (' Prompt message ', ' successfully deleted ' +delnum+ ' option! ', ' info ');
}
}
}

4. Delete an item by the specified value from the Select option
@param objselectid The ID of the target Select component that will be validated
@param Objitemvalue is going to verify the existence of the value

function Removeitemfromselectbyitemvalue (objselectid,objitemvalue) {
var objselect = document.getElementById (objselectid);
If (null! = Objselect && typeof (objselect)! = "undefined") {
Determine if there is
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 (' hint message ', ' no option exists for the specified value! ', ' info ');
}
}
}

5. Clear all options in the Select

@param objselectid The target Select Component ID that will be emptied
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 the item in select, and assemble all values as a string, separated by commas between values and values
@param objselectid target Select Component ID
@return The value of all item in select, separated by commas between values and values
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 a select to another select
@param fromobjselectid The original Select Component ID of the move item
@param toobjectselectid Move Item to enter target Select Component ID
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 to another select
@param fromobjselectid The original Select Component ID of the move item
@param toobjectselectid Move Item to enter target Select Component ID
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;
}
}
}

In HTML Select tab multiple selection