Home >Web Front-end >HTML Tutorial >Detailed explanation of single-select and multiple-select usage of select tag in HTML_HTML/Xhtml_Web page production
Detailed explanation of single-select and multiple-select usage of select tag in HTML_HTML/Xhtml_Web page production
- WBOYOriginal
- 2016-05-16 16:37:422325browse
The select element creates single-select or multiple-select menus. When the form is submitted, the browser submits the selected items, or collects multiple comma-separated options, combines them into a single parameter list, and includes the name attribute when submitting the
Copy code
The code is as follows: Where, tag can be omitted and used in the page
Copy the code
The code is as follows: 2. The Select element can also be used for multiple selections, see the following code:
Copy code
The code is as follows://With the multiple attribute, you can select multiple times
//The following is the case where the size attribute is set. If size = 3, then three pieces of data will be displayed. Note that multiple selections are not allowed.
3. All common operations involved in the multi-select Select component:
1. Determine the select option Whether there is an Item with the specified value in
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 var objSelect = document.getElementById(objSelectId);
var isExit = false;
if (null != objSelect && typeof(objSelect) != "undefined") {
for(var i=0;iif( objSelect.options[i].value == objItemValue) {
isExit = true;
break;
}
}
}
return isExit;
}
2. Add an Item to the select option
var isExit = false;
if (null != objSelect && typeof(objSelect) != "undefined") {
for(var i=0;i
isExit = true;
break;
}
}
}
return isExit;
}
2. Add an Item to the select option
Copy the 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 value is item 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 item from the select option, supporting multiple selection and multiple deletion
@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;iif(objSelect .options[i].selected) {
objSelect.options.remove(i);
delNum = delNum 1;
i = i - 1;
}
}
if (delNum <= 0 ) {
$.messager.alert('Message', 'Please select the option you want to delete!', 'info');
} else {
$.messager .alert('prompt message',''delNum' options were successfully deleted!','info');
}
}
}
4. From select Delete an Item according to the specified value in the option
@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") {
//Determine 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('Message','Deleted successfully!','info');
} else {
$.messager.alert('Message','No There are options with specified values!','info');
}
}
}
5. Clear all options in select
@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;iobjSelect.options.remove(i);
}
}
}
6. Get all items in select, and Assemble all the values into a string, separated by commas
@param objSelectId target select component id
@return the values of all items in 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
@param fromObjSelectId The original select component id of the moved item
@param toObjectSelectId The target select component id that the moved 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;iif(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 to another select
@param fromObjSelectId The original select component id of the moved item
@param toObjectSelectId The target select component id that the moved item will enter
function moveAllToAnotherSelectObject(fromObjSelectId, toObjectSelectId) {
var objSelect = document.getElementById(fromObjSelectId);
if (null != objSelect) {
for(var i=0;iaddOneItemToSelect(toObjectSelectId,objSelect.options[i].text ,objSelect.options[i].value)
objSelect.options.remove(i);
i = i - 1;
}
}
}
@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 value is item 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 item from the select option, supporting multiple selection and multiple deletion
Copy the 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.remove(i);
delNum = delNum 1;
i = i - 1;
}
}
if (delNum <= 0 ) {
$.messager.alert('Message', 'Please select the option you want to delete!', 'info');
} else {
$.messager .alert('prompt message',''delNum' options were successfully deleted!','info');
}
}
}
4. From select Delete an Item according to the specified value in the option
Copy the 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") {
//Determine 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('Message','Deleted successfully!','info');
} else {
$.messager.alert('Message','No There are options with specified values!','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
}
}
}
6. Get all items in select, and Assemble all the values into a string, separated by commas
Copy the code
The code is as follows: @param objSelectId target select component id
@return the values of all items in 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 the code
The code is as follows :@param fromObjSelectId The original select component id of the moved item
@param toObjectSelectId The target select component id that the moved 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
addOneItemToSelect(toObjectSelectId,objSelect.options[i].text,objSelect.options[i].value)
objSelect.options.remove(i);
i = i - 1;
}
}
}
}
8. Move all options to another select
Copy the code
The code is as follows:@param fromObjSelectId The original select component id of the moved item
@param toObjectSelectId The target select component id that the moved item will enter
function moveAllToAnotherSelectObject(fromObjSelectId, toObjectSelectId) {
var objSelect = document.getElementById(fromObjSelectId);
if (null != objSelect) {
for(var i=0;i
objSelect.options.remove(i);
i = i - 1;
}
}
}
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn