How to implement single selection and multiple selection using select tag in HTML
php中世界最好的语言
Release： 2018-02-02 09:51:03
Original
8014 people have browsed it
This time I will show you how to implement single selection and multi-selection using the select tag in HTML. What are the precautions for implementing single selection and multi-selection using the select tag in HTML? The following is a practical case. Let’s take a look. The select element creates a single-select or multiple-select menu. When the form is submitted, the browser submits the selected items, or collects multiple options separated by commas, combines them into a single parameter list, and includes the name when submitting the
Attributes
. 1. Basic usage:
<select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
Copy after login
Among them, the tag can be omitted and used in the page
@param objSelectId 将要进行清空的目标select组件id
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);
}
}
}
Copy after login
6. Get all the items in the select and assemble all the values into a
string , separated by commas
@param objSelectId 目标select组件id
@return select中所有item的值，值与值之间用逗号隔开
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;
}
Copy after login
7. Move all selected options in one select to another select
@param fromObjSelectId 移动item的原select组件id
@param toObjectSelectId 移动item将要进入的目标select组件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;
}
}
}
}
Copy after login
8. Move all selected options in one select to another select Zhongqu
@param fromObjSelectId 移动item的原select组件id
@param toObjectSelectId 移动item将要进入的目标select组件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;
}
}
}
Copy after login
I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!
Related reading:
How to use CSS to set the width of INPUT in TD
How to implement the viewport in the meta tag To control the css attributes of the device screen
How to set the overflow when the table of html is relatively wide
How to add it with style Property example
#htmlHow to control the properties of a new window when opening a hyperlink
The above is the detailed content of How to implement single selection and multiple selection using select tag in HTML. For more information, please follow other related articles on the PHP Chinese website!
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
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
