| 标题 | html中select标签单选多选用法详解 |
| 内容 | select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 <select> 表单数据提交给服务器时包括 name 属性。 一、基本用法： 代码如下: <select> <option value =volvo>volvo</option> <option value =saab>saab</option> <option value=opel>opel</option> <option value=audi>audi</option> </select> 其中，</option>标签可以省掉，在页面中用法 代码如下: <select name=studycenter id=studycenter size=1> <option value=0>全部 <option value=1>湖北电大网络学习中心 <option value=2>成都师范学院网络学习中心 <option value=3>武汉职业技术学院网络学习中心 </select> 二、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> 三、多选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<objselect.options.length;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<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'); } } } 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<objselect.options.length;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.length;) { 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<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; } } } } 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<objselect.options.length;i=i+1) { addoneitemtoselect(toobjectselectid,objselect.options[i].text,objselect.options[i].value) objselect.options.remove(i); i = i - 1; } } } |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。