Heim > Artikel > Web-Frontend > HTML中select标签单选多选用法详解_HTML/Xhtml_网页制作

HTML中select标签单选多选用法详解_HTML/Xhtml_网页制作

WBOYOriginal: 2016-05-16 16:37:422244Durchsuche

select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将

其中，标签可以省掉，在页面中用法

复制代码

代码如下:

二、Select元素还可以多选，看如下代码：

复制代码

代码如下:

//有multiple属性，则可以多选

//下面没有multiple属性 , 只显示一条，不能多选

//下面是设置了size属性的情况 , 如果size = 3 那么就显示三条数据，注意不能多选的。

三、多选Select组件涉及的所有常用操作：

1. 判断select选项中是否存在指定值的Item

复制代码

代码如下:

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

2.向select选项中加入一个Item

复制代码

代码如下:

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

3.从select选项中删除选中的项，支持多选多删

复制代码

代码如下:

@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;iif(objSelect.options[i].selected) {
objSelect.options.remove(i);
delNum = delNum + 1;
i = i - 1;
}
}
if (delNum $.messager.alert('提示消息','请选择你要删除的选项!','info');
} else {
$.messager.alert('提示消息','成功删除了'+delNum+'个选项!','info');
}
}
}

4.从select选项中按指定的值删除一个Item

复制代码

代码如下:

@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;iif(objSelect.options[i].value == objItemValue) {
objSelect.options.remove(i);
break;
}
}
$.messager.alert('提示消息','成功删除!','info');
} else {
$.messager.alert('提示消息','不存在指定值的选项!','info');
}
}
}

5.清空select中的所有选项

复制代码

代码如下:

@param objSelectId 将要进行清空的目标select组件id
function clearSelect(objSelectId) {
var objSelect = document.getElementById(objSelectId);
if (null != objSelect && typeof(objSelect) != "undefined") {
for(var i=0;iobjSelect.options.remove(i);
}
}
}

6. 获取select中的所有item，并且组装所有的值为一个字符串，值与值之间用逗号隔开

复制代码

代码如下:

@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 if (0 == i) {
selectItemsValuesStr = objSelect.options[i].value;
} else {
selectItemsValuesStr = selectItemsValuesStr + "," + objSelect.options[i].value;
}
}
}
return selectItemsValuesStr;
}

7. 将一个select中的所有选中的选项移到另一个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;iif(objSelect.options[i].selected) {
addOneItemToSelect(toObjectSelectId,objSelect.options[i].text,objSelect.options[i].value)
objSelect.options.remove(i);
i = i - 1;
}
}
}
}

8. 将一个select中的所有选项移到另一个select中去

复制代码

代码如下:

@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;iaddOneItemToSelect(toObjectSelectId,objSelect.options[i].text,objSelect.options[i].value)
objSelect.options.remove(i);
i = i - 1;
}
}
}

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：定义span的最小高度没有效果的解决方法_HTML/Xhtml_网页制作Nächster Artikel：使用纯css禁用html中a标签无需JavaScript_HTML/Xhtml_网页制作

In Verbindung stehende Artikel

Mehr sehen