首页 / 知识
在HTML中select标签怎样实现单选和多选
2023-04-11 14:59:00
一、基本用法：
<select>
<optionvalue="volvo">Volvo</option>
<optionvalue="saab">Saab</option>
<optionvalue="opel">Opel</option>
<optionvalue="audi">Audi</option>
</select>
其中，</option>标签可以省掉，在页面中用法
<SELECTNAME="studyCenter"id="studyCenter"SIZE="1">
<OPTIONVALUE="0">全部
<OPTIONVALUE="1">湖北电大网络学习中心
<OPTIONVALUE="2">成都师范学院网络学习中心
<OPTIONVALUE="3">武汉职业技术学院网络学习中心
</SELECT>
二、Select元素还可以多选，看如下代码：
//有multiple属性，则可以多选
<selectname=“education”id=”education”multiple=”multiple”>
<optionvalue=”1”>高中</option>
<optionvalue=”2”>大学</option>
<optionvalue=”3”>博士</option>
</select>
//下面没有multiple属性,只显示一条，不能多选
<selectname=“education”id=”education”>
<optionvalue=”1”>高中</option>
<optionvalue=”2”>大学</option>
<optionvalue=”3”>博士</option>
</select>
//下面是设置了size属性的情况,如果size=3那么就显示三条数据，注意不能多选的。
<selectname="education"id="education"size='3'>
<optionvalue="0">小学</option>
<optionvalue="1">初中</option>
<optionvalue="2">高中</option>
<optionvalue="3">中专</option>
<optionvalue="4">大专</option>
<optionvalue="5">本科</option>
<optionvalue="6">研究生</option>
<optionvalue="7">博士</option>
<optionvalue="8">博士后</option>
<optionselected>请选择</option>
</select>
三、多选Select组件涉及的所有常用操作：
1.判断select选项中是否存在指定值的Item
@paramobjSelectId将要验证的目标select组件的id
@paramobjItemValue将要验证是否存在的值
functionisSelectItemExit(objSelectId,objItemValue){
varobjSelect=document.getElementById(objSelectId);
varisExit=false;
if(null!=objSelect&&typeof(objSelect)!="undefined"){
for(vari=0;i<objSelect.options.length;i++){
if(objSelect.options[i].value==objItemValue){
isExit=true;
break;
}
}
}
returnisExit;
}
2.向select选项中加入一个Item
@paramobjSelectId将要加入item的目标select组件的id
@paramobjItemText将要加入的item显示的内容
@paramobjItemValue将要加入的item的值
functionaddOneItemToSelect(objSelectId,objItemText,objItemValue){
varobjSelect=document.getElementById(objSelectId);
if(null!=objSelect&&typeof(objSelect)!="undefined"){
//判断是否该值的item已经在select中存在
if(isSelectItemExit(objSelectId,objItemValue)){
$.messager.alert('提示消息','该值的选项已经存在!','info');
}else{
varvarItem=newOption(objItemText,objItemValue);
objSelect.options.add(varItem);
}
}
}
3.从select选项中删除选中的项，支持多选多删
@paramobjSelectId将要进行删除的目标select组件id
functionremoveSelectItemsFromSelect(objSelectId){
varobjSelect=document.getElementById(objSelectId);
vardelNum=0;
if(null!=objSelect&&typeof(objSelect)!="undefined"){
for(vari=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
@paramobjSelectId将要验证的目标select组件的id
@paramobjItemValue将要验证是否存在的值
functionremoveItemFromSelectByItemValue(objSelectId,objItemValue){
varobjSelect=document.getElementById(objSelectId);
if(null!=objSelect&&typeof(objSelect)!="undefined"){
//判断是否存在
if(isSelectItemExit(objSelect,objItemValue)){
for(vari=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中的所有选项
@paramobjSelectId将要进行清空的目标select组件id
functionclearSelect(objSelectId){
varobjSelect=document.getElementById(objSelectId);
if(null!=objSelect&&typeof(objSelect)!="undefined"){
for(vari=0;i<objSelect.options.length;){
objSelect.options.remove(i);
}
}
}
6.获取select中的所有item，并且组装所有的值为一个字符串，值与值之间用逗号隔开
@paramobjSelectId目标select组件id
@returnselect中所有item的值，值与值之间用逗号隔开
functiongetAllItemValuesByString(objSelectId){
varselectItemsValuesStr="";
varobjSelect=document.getElementById(objSelectId);
if(null!=objSelect&&typeof(objSelect)!="undefined"){
varlength=objSelect.options.length
for(vari=0;i<length;i=i+1){
if(0==i){
selectItemsValuesStr=objSelect.options[i].value;
}else{
selectItemsValuesStr=selectItemsValuesStr+","+objSelect.options[i].value;
}
}
}
returnselectItemsValuesStr;
}
7.将一个select中的所有选中的选项移到另一个select中去
@paramfromObjSelectId移动item的原select组件id
@paramtoObjectSelectId移动item将要进入的目标select组件id
functionmoveAllSelectedToAnotherSelectObject(fromObjSelectId,toObjectSelectId){
varobjSelect=document.getElementById(fromObjSelectId);
vardelNum=0;
if(null!=objSelect&&typeof(objSelect)!="undefined"){
for(vari=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中去
@paramfromObjSelectId移动item的原select组件id
@paramtoObjectSelectId移动item将要进入的目标select组件id
functionmoveAllToAnotherSelectObject(fromObjSelectId,toObjectSelectId){
varobjSelect=document.getElementById(fromObjSelectId);
if(null!=objSelect){
for(vari=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;
}
}
}
本文转载自中文网 |
最新内容
相关内容
python如何读取列表中元素的位置?
python如何读取列表中元素的位置?，位置，数据，异常，培训，字符串，元素，索引，方法，示例，结果，python读取列表中元素位置的方法：1、使用index()方
python使用matplotlib绘图怎么在线
python使用matplotlib绘图怎么在线上标注?，地方，培训，坐标轴，图像，范围，画图，示例，注释，文字描述，以上，python画图常用标注包含，坐标轴的值和
python3中怎么编写类?
python3中怎么编写类?，培训，方式，步骤，关键字，以上，过程，方法，更多，内容，python中创建类的方法：方式一：利用class关键字classChinese(object):
python中获取路径的三种方法
python中获取路径的三种方法，工作，代码，情况，培训，下来，路径，文件，也就是，桌面，目录，python中获取路径总结下来分为三种情况：1、获取工作目录
python如何调用另一个文件夹中的内
python如何调用另一个文件夹中的内容?，系统，培训，文件，模块，内容，路径，函数，所在，前缀，语句，python中调用另外一个文件夹中的内容：1、同一文件
python中怎么对一个数进行因式分解
python中怎么对一个数进行因式分解?，代码，培训，因式分解，因数，个数，最小，整数，数组，假定，分解，1、Python因式分解代码：importtime#对一个数进python中函数怎么表示?
python中函数怎么表示?，名称，标准，培训，代码，函数，圆括号，字符串，表达式，选择性，自变量，python中函数定义规则：·函数代码块以def关键词开头，后
python如何去空格和回车?
python如何去空格和回车?，培训，空格，方法，字符串，两端，以上，更多，内容，python去掉空格和回车的方法：1、使用strip()、lstrip()、rstrip()等
chr在python中怎么用?
chr在python中怎么用?，数字，培训，整数，字符，参数，示例，语法，范围，形式，以上，python中chr()用一个范围在range(256)内的(就是0～255)整数作参数，
python中怎么样进行矩阵运算?
python中怎么样进行矩阵运算?，矩阵，培训，数据，数值，行列，函数，开头，元素，以上，时候，python的numpy库提供矩阵运算的功能，因此我们在需要矩阵运
如何在python代码中指定保存的文件
如何在python代码中指定保存的文件格式，代码，培训，文件格式，格式，二进制文件，文件，后缀，以上，方法，更多，python指定保存文件格式的方法：1、保怎样用python计算矩阵乘法?
怎样用python计算矩阵乘法?，位置，矩阵，培训，一致，乘法，数组，函数，示例，作用，标量，python中计算矩阵乘法的方法：1、使用np.multiply()函数计算