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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Vue自定义标签[通俗易懂]

    Vue自定义标签[通俗易懂]简介主要讲解vue中如何定义自定义标签。自定义标签使用vue的配置对象中的directives属性进行配置。比如下面代码定义一个自定义标签v-big,可以把绑定的表达式乘以十倍渲染到元素的text区,相当于v-text,只是他表达式要数字并且会乘以10倍后渲染。<!DOCTYPEhtml><htmllang=”en”><head><metacharset=”UTF-8″><title>自定义指令</tit

    2022年10月30日
    0
  • cmd批处理命令~%dp0与~%dpn1的解析

    cmd批处理命令~%dp0与~%dpn1的解析1、最简单的做法是在cmd命令输入:for/?,回车,就能看到详细的解析对一组文件中的每一个文件执行某个特定命令。FOR%variableIN(set)DOcommand[command-parameters]%variable指定一个单一字母可替换的参数。(set)指定一个或一组文件。可以使用通配符。command指定对每个文件执行的命令。…

    2022年9月16日
    0
  • golang2021激活码【注册码】

    golang2021激活码【注册码】,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月18日
    78
  • CentOS7 解决无法使用tab自动补全

    CentOS7 解决无法使用tab自动补全

    2021年6月3日
    110
  • 第四章 循环结构

    第四章 循环结构

    2021年9月28日
    57
  • linux挂马检测,检测网站挂马程序(Python)

    linux挂马检测,检测网站挂马程序(Python)系统管理员通常从svn/git中检索代码,部署站点后通常首先会生成该站点所有文件的MD5值,如果上线后网站页面内容被篡改(如挂马)等,可以比对之前生成MD5值快速查找去那些文件被更改,为了使系统管理员第一时间发现,可结合crontab或nagios等工具。程序测试如下:#pythoncheck_change.pyUsage:pythoncheck_change.pyupdate/hom…

    2022年9月30日
    0

发表回复

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

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