html'中select多选,在HTML中select标签如何实现单选和多选
在HTML中select标签如何实现单选和多选
发布时间:2020-09-29 17:01:54
来源:亿速云
阅读:105
作者:小新
这篇文章主要介绍了在HTML中select标签如何实现单选和多选,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
select 元素可创建单选或多选菜单。当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多个选项,将其合成一个单独的参数列表,并且在将 表单数据提交给服务器时包括 name 属性。
一、基本用法:
Volvo
Saab
Opel
Audi
其中,标签可以省掉,在页面中用法
全部
湖北电大网络学习中心
成都师范学院网络学习中心
武汉职业技术学院网络学习中心
二、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;
}
}
}
感谢你能够认真阅读完这篇文章,希望小编分享在HTML中select标签如何实现单选和多选内容对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,遇到问题就找亿速云,详细的解决方法等着你来学习!
html'中select多选,在HTML中select标签如何实现单选和多选相关推荐
- html中单选怎么写,在HTML中select标签怎样实现单选和多选
一.基本用法: Volvo Saab Opel Audi 其中,标签可以省掉,在页面中用法 全部 湖北电大网络学习中心 成都师范学院网络学习中心 武汉职业技术学院网络学习中心 二.Select元素还可 ...
- php多选筛选,织梦二次开发联动筛选(单选和多选)功能的实现
织梦dedecms二次开发联动筛选(单选和多选)功能的实现 . 首先我把单选的代码贴出来,这个是我参考其他网站的,多选也是基于这个单选修改的,所以如果要做多选的话,也请先把单选的这些代码配置好. 联动 ...
- android的listview多选功能,Android ListView实现单选及多选等功能示例
本文实例讲述了Android ListView实现单选及多选等功能的方法.分享给大家供大家参考,具体如下: 在项目中也遇到过给ListView的item添加选择功能.比如一个网购APP,有个历史浏览页 ...
- RecyclerView实现单选和多选功能
又来更新小功能了,项目中经常会遇到单选多选功能,总是草草的写下没有系统总结,今天来记录一下.这篇是用RecyclerView实现单选多选功能,下一篇再来讲用RecyclerView实现折叠效果的树形结 ...
- 下拉框——把一个select框中选中内容移到另一个select框中遇到的问题
在使用jQuery实现把一个select框中选中内容移到另一个select框中功能时遇到了一个问题,就是点击按钮时内容可以到另一个select框中,但是到了另一个select框中的内容却很快闪退回原来 ...
- 点击编辑框全选内容java_Android 中使用EditText 点击全选再次点击取消全选功能
最近在开发浏览器碰到这么一个需求:点击地址栏的时候,需要全选并调出键盘,再次点击就取消全选显示光标.点击屏幕除地址栏其他位置时,键盘隐藏,隐藏光标. 大部分浏览器都是这样的逻辑,这样可以提高用户体验, ...
- pandas筛选dataframe列名称中包含特定字符串的数据列(select columns contains specifiec substring in dataframe)
pandas筛选dataframe列名称中包含特定字符串的数据列(select columns contains specifiec substring in dataframe) 目录 pandas ...
- mysql 查询指定字段数据_MySQL使用select语句查询指定表中指定列(字段)的数据
本文介绍mysql数据库中执行select查询语句,查询指定列的数据,即指定字段的数据. 再来回顾一下sql语句中的select语句的语法: select 语句的基本语法: select from w ...
- oracle insert into values select from,ORACLE语法中的INSERT INTO。。。SELECT。。。 收藏
ORACLE语法中的INSERT INTO...SELECT... 收藏 今天写INSERT语句,想直接把一表里的数据取出直接插进另外一表.结果语法忘记了.找了半天.真是白痴啊自己,先把找到的语法记录 ...
最新文章
- 百度eCharts体验
- ASP.NET MVC Bundles 用法和说明(打包javascript和css)
- linux改变工作目录命令,linux命令:cd命令,改变当前的工作目录
- vant图标怎么显示不出来_U盘插进电脑但不显示怎么解决
- sqlerror.java.1055,at com.mysql.jdbc.SQLError.createSQLException(SQLError.java:1055)
- java五子棋代码详解_代码详解:Java和Valohai的深度学习之旅
- Linux——JDK的部署
- 微信小程序弹出框竖向滚动_微信小程序 解决自定义弹出层滑动时下层页面滚动问题...
- UWP通过机器学习加载ONNX进行表情识别
- C#LeetCode刷题之#345-反转字符串中的元音字母​​​​​​​(Reverse Vowels of a String)
- cocos2d-x 3.0 画图节点——Node
- Android 系统(212)---monkey实战–测试步骤、常用参数、常规monkey命令
- Retrofit请求数据对错误以及网络异常的处理
- 一步一个脚印学习WCF系列之WCF概要—WCF与SOA(二)
- [蓝桥] 基础练习 十六进制转十进制
- sort降序shell_shell脚本学习指南之文本排序与排重等
- 大众新能源电动车ID.3ID.4技术培训教材手册维修手册电路图
- golang制作一个斗地主游戏服务器[5]:牌型
- CE修改Eternium永恒之金【LUA篇】
- vivoX30是android5的吗,深度剖析揭秘opporeno5质量和vivox30区别是?选哪个更好?独家揭秘报道...
热门文章
- [-137]:服务器正在运行或者存在其他进程正在操作同一个库
- 关于Windows 7 64位系统 HP M1319f 打印机无法扫描的解决办法
- 当过水泥工,25岁研究出超级病毒,堪称杀毒界的“疫苗”
- IMU 惯性测量单元 介绍(一)
- 游戏技巧-《我的世界》地图存档简介及使用
- vue项目播放H.265编码视频流
- 计算机导论——HTML基础
- 【多式联运】基于matlab粒子群结合遗传算法求解陆海空多式联运问题【含Matlab源码 2061期】
- 基于RetinaFace的口罩人脸检测算法
- 【离职总结复盘】在墨刀远程实习的两个半月,既不舍,又感激,这是初恋的感觉……