Detailed explanation of single-choice and multiple-choice selection in HTML select tag

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

<SELECT NAME="studyCenter" id="studyCenter" SIZE="1">
<OPTION VALUE="0">All
<OPTION VALUE="1">Hubei TV University Online Learning Center
<OPTION VALUE="2">Chengdu Normal University Online Learning Center
<OPTION VALUE="3">Wuhan Vocational and Technical College Online Learning Center
</SELECT>

//If there is a multiple attribute, you can select multiple items.
<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 item 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>
//The following is the case where the size attribute is set. If size = 3, three pieces of data will be displayed. Note that multiple selections are not allowed.
<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">College</option>
<option value="5">Bachelor's degree</option>
<option value="6">Graduate students</option>
<option value="7">Doctor</option>
<option value="8">Postdoctoral</option>
<option selected>Please select</option>
</select>

@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;i<objSelect.options.length;i++) {
if(objSelect.options[i].value == objItemValue) {
isExit = true;
break;
}
}
}
return isExit;
}

@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 item of this value 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);
}
}
}

@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;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');
}
}
}

@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") {
//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','the option with the specified value does not exist!','info');
}
}
}

@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;i<objSelect.options.length;) {
objSelect.options.remove(i);
}
}
}

@param objSelectId target select component id
@return The values ​​of all items in the 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;
}

@param fromObjSelectId The original select component id of the mobile item
@param toObjectSelectId The target select component id to which the moving item will go
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;
}
}
}
}

@param fromObjSelectId The original select component id of the mobile item
@param toObjectSelectId The target select component id to which the moving item will go
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;
}
}
}