js怎么能取得多选下拉框选中的多个值?

js怎么能取得多选下拉框选中的多个值?

方法:获取多选下拉框对象数组→循环判断option选项的selected属性(true为选中,false为未选中)→使用value属性取出选中项的值。实例演示如下:

1、HTML结构

1
2
3
4
5
6
7
<
select 
id
=
"test" 
multiple
=
"true"
>
    
<
option 
value
=
"option-A"
>option-A</
option
>  
    
<
option 
value
=
"option-B"
>option-B</
option
>
    
<
option 
value
=
"option-C"
>option-C</
option
> 
    
<
option 
value
=
"option-D"
>option-D</
option
>
</
select
>
<
input 
type
=
"button" 
value
=
"确定" 
onclick
=
"fun()" 
/>

2、javascript代码

1
2
3
4
5
6
7
8
9
10
function 
fun(){
    
var 
select = document.getElementById(
"test"
);
    
var 
str = [];
    
for
(i=0;i<select.length;i++){
        
if
(select.options[i].selected){
            
str.push(select[i].value);
        
}
    
}
    
alert(str);
}

3、效果演示

 

 js怎么能取得多选下拉框选中的多个值?

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/112389.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 群晖nas 文件服务器,群晖nas挂到云服务器上

    群晖nas 文件服务器,群晖nas挂到云服务器上群晖nas挂到云服务器上内容精选换一换在公有云上部署SAPHANA所需要的云服务如下。无法直接从云备份控制台查看备份中的数据,您可以通过以下几种方式进行查看:云服务器备份使用云服务器备份创建镜像后,再使用镜像创建云服务器。登录云服务器,查看服务器中的数据。云硬盘备份使用云硬盘备份创建新的云硬盘后,将云硬盘挂载至云服务器上。登录云服务器,查看磁盘中的数据。SFSTurbo备份使用SFSTur…

    2022年6月26日
  • docker安装redis集群_docker eureka集群

    docker安装redis集群_docker eureka集群NeoKylin-Server离线部署跨主机redis集群NeoKylin-Server离线部署跨主机redis集群一、说明二、部署过程:1.切换root账号或所有语句加sudo;2.关闭6个节点防火墙(或打开端口);3.6个节点导入rpm包后安装基础环境:4.设置所有节点;5.启动docker并导入images;6.时间同步;7.etcd集群配置;8.部署flannel网络;9.n1-n3部署pxc;10.m1-m3部署Haproxy+Keepalived容器;11.m1-m3宿主机

    2022年8月10日
  • SphinX人像识别 — 联想笔记本人脸识别系统 (适合所有带摄像头的电脑)

    SphinX人像识别 — 联想笔记本人脸识别系统 (适合所有带摄像头的电脑)

    2021年7月28日
  • tomcat7编译

    tomcat7编译本文是Tomcat源代码阅读系列的第一篇文章,在阅读Tomcat源代码之前,我们首先需要将Tomcat的源代码在IDE里面运行起来,这样方便我们阅读的过程中调试。本文总结一下在IDEA或者Eclipse中运行Tomcat源代码环境的搭建过程,同时我们通过Maven来负责项目的构建。在进行搭建之前,我们首先来说一下总体的思路。我们知道Tomcat运行的时候,一部分是源代码编译以后的可运行

    2022年7月18日
  • 【模式识别】OpenCV中使用神经网络 CvANN_MLP

    【模式识别】OpenCV中使用神经网络 CvANN_MLPOpenCV的ml模块实现了人工神经网络(ArtificialNeuralNetworks,ANN)最典型的多层感知器(multi-layerperceptrons,MLP)模型。由于ml模型实现的算法都继承自统一的CvStatModel基类,其训练和预测的接口都是train(),predict(),非常简单。下面来看神经网络CvANN_MLP的使用~定义神经网络及参数:…

    2022年6月16日
  • accept-encoding导致乱码问题

    accept-encoding导致乱码问题Accept-Encoding:gzip,deflate这个头信息是告诉服务器客户端所支持的压缩方式(然而数据压缩了但没有自动转,就会导致乱码)没有这个头信息说明客户端不支持压缩,要求不压缩直接返回文本

    2022年7月15日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号