HTML中select标签单选多选用法详解

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

　　if(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;i

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

　　}

　　}

　　}

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

　　if(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;i

　　objSelect.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 < length; i = i + 1) {

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

　　if(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;i

　　addOneItemToSelect(toObjectSelectId,objSelect.options[i].text,objSelect.options[i].value)

　　objSelect.options.remove(i);

　　i = i - 1;

　　}

　　}

　　}