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

Detailed explanation of single-choice and multiple-choice selection in HTML select tag
The select element creates a single-select or multi-select menu. When the form is submitted, the browser submits the selected item, or collects multiple options separated by commas, into a single parameter list and includes the name attribute when submitting the <select> form data to the server.

1. Basic usage:

Copy code
The code is as follows:

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

Among them, the </option> tag can be omitted and used in the page

Copy code
The code is as follows:

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

Second, the Select element can also select multiple items, see the following code:

Copy code
The code is as follows:

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

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

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

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

2. Add an Item to the select option

Copy 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 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);
}
}
}

3. Delete the selected items from the select options, support multiple selections and multiple deletions

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

4. Delete an Item from the select option by the specified value

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

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

6. Get all items in the select and assemble all values ​​into a string, with commas between values

Copy code
The code is as follows:

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

7. Move all selected options in one select to another select

Copy code
The code is as follows:

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

8. Move all options from one select to another select

Copy code
The code is as follows:

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

<<:  This article summarizes the specific use of CSS two-column layout and three-column layout

>>:  The idea and process of Vue to realize the function of remembering account and password

Recommend

MySQL foreign key constraint (FOREIGN KEY) case explanation

MySQL foreign key constraint (FOREIGN KEY) is a s...

CentOS uses local yum source to build LAMP environment graphic tutorial

This article describes how to use the local yum s...

Detailed explanation of two points to note in vue3: setup

Table of contents In vue2 In vue3 Notes on setup ...

Solution to the problem that the number of MySQL connections is limited to 214 in CentOS 7

Find the problem Recently, I encountered a proble...

Docker deploys Laravel application to realize queue & task scheduling

In the previous article, we wrote about how to de...

Example of using swiper plugin to implement carousel in Vue

Table of contents vue - Use swiper plugin to impl...

N ways to cleverly implement adaptive dividers with CSS

Dividing lines are a common type of design on web...

In-depth analysis of Nginx virtual host

Table of contents 1. Virtual Host 1.1 Virtual Hos...

JavaScript to achieve a simple message board case

Use Javascript to implement a message board examp...

Research on the effect of page sidebar realized by JS

Table of contents Discover: Application of displa...

JavaScript to achieve the effect of clicking on the self-made menu

This article shares the specific code of JavaScri...

What is web design

<br />Original article: http://www.alistapar...

WeChat applet implements search function and jumps to search results page

Search Page: search.wxml page: <view class=&qu...

Solution to the problem that mysql cannot start after modifying the default path of the database

Preface When mysql modified the default database ...

MySQL data loss troubleshooting case

Table of contents Preface On-site investigation C...