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<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">全部 <OPTION VALUE="1">湖北电大网络学习中心 <OPTION VALUE="2">成都师范学院网络学习中心 <OPTION VALUE="3">武汉职业技术学院网络学习中心 </SELECT>
//有multiple属性，则可以多选 <select name= “education” id=”education” multiple=”multiple”> <option value=”1”>高中</option> <option value=”2”>大学</option> <option value=”3”>博士</option> </select> //下面没有multiple属性 , 只显示一条，不能多选 <select name= “education” id=”education” > <option value=”1”>高中</option> <option value=”2”>大学</option> <option value=”3”>博士</option> </select> //下面是设置了size属性的情况 , 如果size = 3 那么就显示三条数据，注意不能多选的。 <select name="education" id="education" size='3'> <option value="0">小学</option> <option value="1">初中</option> <option value="2">高中</option> <option value="3">中专</option> <option value="4">大专</option> <option value="5">本科</option> <option value="6">研究生</option> <option value="7">博士</option> <option value="8">博士后</option> <option selected>请选择</option> </select>
1. Determine whether there is an Item with a specified value in the select option.
@param objSelectId 将要验证的目标select组件的id
@param objItemValue 将要验证是否存在的值
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 将要加入item的目标select组件的id
@param objItemText 将要加入的item显示的内容
@param objItemValue 将要加入的item的值
function addOneItemToSelect(objSelectId,objItemText,objItemValue) {
var objSelect = document.getElementById(objSelectId);
if (null != objSelect && typeof(objSelect) != "undefined") {
//判断是否该值的item已经在select中存在
if(isSelectItemExit(objSelectId,objItemValue)) {
$.messager.alert('提示消息','该值的选项已经存在!','info');
} else {
var varItem = new Option(objItemText,objItemValue);
objSelect.options.add(varItem);
}
}
}selected item from the select option, supported Multiple selection and multiple deletion
@param objSelectId 将要进行删除的目标select组件id
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('提示消息','请选择你要删除的选项!','info');
} else {
$.messager.alert('提示消息','成功删除了'+delNum+'个选项!','info');
}
}
}@param objSelectId 将要验证的目标select组件的id
@param objItemValue 将要验证是否存在的值
function removeItemFromSelectByItemValue(objSelectId,objItemValue) {
var objSelect = document.getElementById(objSelectId);
if (null != objSelect && typeof(objSelect) != "undefined") {
//判断是否存在
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('提示消息','成功删除!','info');
} else {
$.messager.alert('提示消息','不存在指定值的选项!','info');
}
}
}@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);
}
}
}@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;
}@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;
}
}
}
}@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;
}
}
}Related reading:
How to use CSS to set the width of INPUT in TDHow to implement the viewport in the meta tag To control the css attributes of the device screenHow to set the overflow when the table of html is relatively wideHow to add it with style Property example#htmlHow to control the properties of a new window when opening a hyperlinkThe 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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
