html中单选多选怎么写,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中单选多选怎么写,HTML中select标签单选多选用法详解相关推荐
- python中select用法_Python select及selectors模块概念用法详解
1. select模块 针对select,要先理解其他几个概念: 文件描述符: 文件描述符在形式上是一个非负整数.实际上,它是一个索引值,指向内核为每一个进程所维护的该进程打开文件的记录表.当程序打开 ...
- php中floatval是什么意思,【后端开发】php floatval()函数的用法详解
本篇文章主要给大家介绍 php floatval()函数的用法,希望对需要的朋友有所帮助! floatval()函数是PHP中的内置函数,它返回变量的浮点值. 语法: float floatval ( ...
- html语言 input,input标签(HTML中input用法详解)
input标签 Firstname: Lastname: HTML中input用法详解 1.type 格式:type="文本的类型" 当type设置为text时,text属性表示一 ...
- python的继承用法_【后端开发】python中继承有什么用法?python继承的用法详解
本篇文章给大家带来的内容是关于python中继承有什么用法?python继承的用法详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 面向对象三大特征 1.封装:根据职责将属性和方法 ...
- 教程-Delphi中Spcomm使用属性及用法详解
Delphi中Spcomm使用属性及用法详解 Delphi是一种具有 功能强大.简便易用和代码执行速度快等优点的可视化快速应用开发工具,它在构架企业信息系统方面发挥着越来越重要的作用,许多程序员愿意选 ...
- JSP 中EL表达式用法详解
EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL主要的语法结构: ${sessionScope.user.sex} 所有EL都是以${ ...
- python中的super用法详解_Python中super函数用法实例分析
本文实例讲述了python中super函数用法.分享给大家供大家参考,具体如下: 这是个高大上的函数,在python装13手册里面介绍过多使用可显得自己是高手 23333. 但其实他还是很重要的. 简 ...
- 下拉插件 (带搜索) Bootstrap-select 从后台获取数据填充到select的 option中 用法详解...
今天收到了客户的需求,要求在新增停车场ID的时候要从数据库查出来对应的停车场名称然后显示在界面上.保存的时候按照停车场ID进行保存. 自己首先把后台的部分写完了,测试了接口数据.成功的拿到了ajax数 ...
- STL 中map的用法详解
STL 中map的用法详解 Map是STL的一个关联容器,它提供一对一(其中第一个可以称为关键字,每个关键字只能在map中出现一次,第二个可能称为该关键字的值)的数据处理能力,由于这个特性,它完成有可 ...
- STL中map和string, vector 用法详解
1. map 用法详解 std map是STL的一个关联容器,它提供一对一(其中第一个可以称为关键字,每个关键字只能在map中出现一次,第二个可能称为该关键字的值)的数据处理能力,由于这个特性,它完成 ...
最新文章
- 欢迎来到OpenGL的世界
- Java为什么会存成undefined,为什么我在Java中获得NoClassDefFoundError?
- fortran和Java学_Fortran模块和全局变量
- Nhibernate代码生成器v2.1中文版
- 中国内容推荐引擎市场趋势报告、技术动态创新及市场预测
- Nginx缓存配置以及nginx ngx_cache_purge模块的使用
- 用友与中国互联网协会签署战略合作 共推企业互联网转型
- java 局部变量 for_java-增强的for循环中局部变量的范围
- 深信服scsa知识点二
- SREng 使用指南(一)SREng简介
- 图解数据分析(4) | 核心步骤1 - 业务认知与数据初探(数据科学家入门·完结)
- dubbo反序列化问题 Unable to find class: path
- html5 侧滑菜单,侧滑菜单
- 几本经典的投资理财书
- 期末了,用Python写个自动批改作业系统
- NOIP2016 天天爱跑步
- VBA中字典的写入技巧
- mysql 1146 错误解决方法
- 成长型企业的好帮手:超融合小身材却有大能量
- 常用的计算机有哪些台式的还有哪些,现在台式电脑的主流配置有哪些?
热门文章
- foxmail收件不及时_临近双11,多地快递网点却不送货、欠薪、倒闭?啥原因→
- python网页爬取方法_Python爬取网页的三种方法
- iphone7参数_来自iPhone8用户的真实体验---这次我们不谈参数,只聊体验
- 军转干部计算机测试题,2015福建军转干考试计算机基础知识:计算机网络
- 字节月薪6万招 kubernetes 开发,看到要求我傻眼了……
- 靠 GitHub 打赏谋生的程序员,他们是怎么做的?
- 如何友好的把Python和Bash结合在一起
- 这款Python王者编辑器,集Pycharm和Sublime优点于一身
- 收藏 | 49 个 Python 学习资源
- foreach判断最后一个_PHP 内核:foreach 是如何工作的(二)