获取多选下拉框(select标签设置multiple属性)的值

2023-11-19

<select multiple>不能直接获取value,需要借助该元素的options属性。如下:

<select id="select" multiple>
    <option value="1">1111</option>
    <option value="2">2222</option>
    <option value="3">3333</option>
</select >


<script>
    // 获取select元素的options属性
    const options = document.querySelector('#select').options

    const selectedValueArr = []
    for (let i = 0; i < options.length; i++) {
        // 如果该option被选中,则将它的value存入数组
        if (options[i].selected) {
            selectedValueArr.push(options[i].value)
        }
    }

    // 如果后端需要字符串形式,比如逗号分隔
    const selectedValueStr = selectedValueArr.join(',')

    // Ajax code here
    // ...
</script>

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

获取多选下拉框(select标签设置multiple属性)的值 的相关文章

  • CryptoJS 使用密码加密 AES,但 PHP 解密需要密钥

    我在用CryptoJS https code google com p crypto js AES加密字符串 function doHash msg msg String msg var passphrase aggourakia var
  • 有没有办法让 jslint 在 javascript 的下一行中使用大括号?

    我改变了我的编码风格 function getParams entity use strict var accountID store getItem AccountID switch entity case Topic to functi
  • 每n秒执行一次函数

    我制作了这个在 10 秒后点击链接的代码片段 function timeout window setTimeout function img left click 1000 setTimeout timeout 1000 timeout 我
  • 将 SVG 路径转换为绝对命令

    给定一个 SVG Path 元素 如何将所有路径命令转换为绝对坐标 例如 转换此路径
  • 由于 MIME 类型而导致资源被阻止?

    多年来我已经成功地包含动态创建的 javascript 文件 这是一个例子 https granadainfo com sups php locs 95 https granadainfo com sups php locs 95 正如你所
  • Twitter Bootstrap - 下拉菜单 - 箭头键不适用于 Firefox 中的输入标签

    要求 我想在带有用户名和密码字段的下拉菜单中放置一个登录表单 我可以做到这一点 除了以下问题之外 一切正常 Issue 打字时我无法使用箭头键 上 下 firefox 当输入位于下拉代码之外时 这很有效 这适用于其他浏览器 例如 googl
  • 使用 IE9、10、11 的 CSS 将比例打印到 50% 等百分比

    Zoom css 属性不适用于 IE9 10 11 观察到打印预览 UI 令人不安 默认比例为 缩小以适合 当我将此比例从 缩小 更改为适合 50 时 页面显示正常 打印预览 任何人都可以帮助我如何使用 CSS 代码将比例设置为 50 为页
  • 如何防止输入文本中出现“后重音”

    我相信这是一个简单的问题 但在谷歌上搜索几个小时后我找不到任何答案 也许我无法在搜索中使用正确的单词 P 我有一个 javascript 方法 可以防止用户用数字以外的其他字符填充文本框 如下面的代码所示 它在 KeyDown 事件中使用
  • 对使用“new”创建的数组上“map”的行为感到困惑[重复]

    这个问题在这里已经有答案了 我对结果感到困惑mapping 使用创建的数组new function returnsFourteen return 14 var a new Array 4 gt undefined x 4 in Chrome
  • 在 Chrome 开发者工具中禁用调试器语句

    我正在尝试对恶意 JavaScript 进行逆向工程 当我最初加载侧面时 会注入 JS 代码 其中包括 debugger 语句并将断点注入我的 chrome 开发人员控制台 通过stackoverflow阅读 禁用所有断点does not帮
  • ES6 静态方法引用 self? [复制]

    这个问题在这里已经有答案了 我有两节课 存储库和用户存储库 我想在 Repository 中定义一个静态方法 该方法在运行时调用 UserRepository 中的静态函数 有什么干净的方法可以做到这一点吗 class Repository
  • JavaScript 错误:MVC2 视图中的条件编译已关闭

    我试图在 MVC2 视图页面中单击时调用 JavaScript 函数 a href Select a JavaScript 函数 function SelectBenefit id code alert id alert code 这里 b
  • 使用 nockjs 和 jest 进行 Promise/异步单元测试的代码覆盖率问题

    我使用 NockJS 和 Jest 为 React 应用程序编写了一个简单的 API 调用单元测试 如下所示 AjaxService js export const AjaxService post url data headers gt
  • 如何使用 Javascript 在 html 文件中搜索字符串?

    我有 5 个 html 文件 并且有一个搜索表单 我想用它来搜索这些 html 文件中的文本
  • 如何将项目插入到特定索引处的空数组中?

    我想将一个项目插入到空数组的指定索引中 我看到有 Array prototype splice 方法 但是 如果我在空数组上使用 splice 它只会添加项目来结束数组 如下所示 var a a splice 3 0 item 3 cons
  • 悬停时的 CSS 过渡

    我有个问题 实际上 当我将鼠标悬停在对象上时 我尝试在 div 上进行转换 所以基本上我有一个div 当我将鼠标悬停在div上时 它应该在其顶部显示另一个div 但是它应该被转换 这样悬停效果会更平滑 如果我有这两个 div 怎么可能 di
  • 标题的下边框小于宽度

    我需要创建一个下划线效果底部边框小于h2标题的宽度 通常我不上传图片 但我认为这可能有助于进一步解释问题 您可以为此使用伪元素 例子 http jsfiddle net SZ39x pseudo border position relati
  • ‘state’未定义 no-undef

    我使用教程来学习 React 但我很快就陷入困境 在教程中 他们使用以下代码 import React Component from react class Counter extends Component state count 0 r
  • highchart堆积柱每个类别的总数据

    我想获取每个类别的总数据 这point stackTotal只给出活动数据的总数 从我粘贴的代码示例中 我想知道每种水果的总消耗量 因此 即使我单击右上角图例上的乔的名字 这使得堆叠图表上的所有乔信息都处于非活动状态 我仍然可以知道约翰 简
  • Html5画布最热门的任意形状

    我正在尝试开发可以在画布中渲染图像和文本的程序 我尝试处理画布中图像的点击 但它适用于可矩形图像 我的问题 您是否知道处理单击画布中图像的可见部分 非透明部分 的解决方案或框架 我正在寻找 ActionScript hitTestObjec

随机推荐

  • jquery 全国 三联 地址选择

    https www jq22 com demo jquery jdxz20160902
  • 中文命名实体识别

    中文命名实体识别 1 语言技术平台 LTP 2 Pyhanlp 3 BosonNLP 1 语言技术平台 LTP LTP官方地址 语言技术平台 Language Technology Plantform 要想用LTP实现中文命名实体识别非常简
  • JAVA基础06方法

    6 方法 方法可以用于定义可重用的代码以及组织和简化编码 6 1 定义方法 方法的定义由方法名称 参数 返回值类型以及方法体组成 定义方法的语法如下所示 修饰符 返回值类型 方法名 参数列表 方法体 我们一起来看一个方法的定义 该方法找出两
  • Normalizing Flows (NF) - 流模型 - 研究方向

    Normalizing Flows An Introduction and Review of Current Methods 2020 TPAMI Open problems and possible research direction
  • K8S暴露端口-dubbo应用远程Debug

    1 Dockerfile增加环境变量 ENV JAVA OPTS Xdebug Xrunjdwp transport dt socket address 9901 server y suspend n 2 暴露端口 template ser
  • Spring的两种IOC容器

    文章目录 Spring IOC容器 BeanFactory 怎样创建BeanFactory BeanFactory中的方法 ApplicationContext 几种ApplicationContext 如何创建ApplicationCon
  • 安装batocera-linux教程_batocera游戏系统,一个U盘搞定所有模拟器

    本帖最后由 仙鬼同拥 于 2020 5 10 09 57 编辑 去年有人发过一个求助帖找这个模拟器系统 今天有人私信说链接打不开了 就自己开一贴说一下下载安装过程吧 原求助帖地址https www 52pojie cn thread 994
  • STM32 高级定时器周期、频率、占空比、对外输出电压详解

    STM32 高级定时器 最近在研究电机 对TIM定时器研究了一些 将一些存在疑惑的问题 通过试验和示波器分析 得到以下结论 供大家学习参考 1 介绍输出电压高低判断 输出比较时 OC1对外输出电压为示波器可以读取的电压 也是我们最终使用的电
  • c语言 凯撒加密

    为了防止信息被别人轻易窃取 需要把电码明文通过加密方式变换成为密文 输入一个以回车符为结束标志的字符串 少于80个字符 再输入一个整数offset 用凯撒密码将其加密后输出 恺撒密码是一种简单的替换加密技术 将明文中的所有字母都在字母表上偏
  • 解决Docker容器中Mysql中文乱码问题

    进入容器 修改 etc mysql my cnf 添加如下配置 client port 3306 socket var lib mysql mysql sock default character set utf8 mysqld port
  • Microsoft Office 2010安装

    哈喽 大家好 今天一起学习的是office2010的安装 有兴趣的小伙伴也可以来一起试试手 一 测试演示参数 演示操作系统 Windows 7 不建议win10及以上操作系统使用 系统类型 64位 演示版本 SW DVD5 Office P
  • python库Camelot从pdf抽取表格数据以及python库camelot安装及使用中的一些注意事项

    一 python库camelot安装及使用中的一些注意事项 1 camelot方法有两种解析模式 流解析 stream 格子解析 lattice 其中格子解析能够保留表格完整的样式 对于复杂表格来说要优于流解析模式 同时 camelot方法
  • word2016怎么显示修改痕迹

    写需求文档时 想保留每次和产品沟通后修改的痕迹 避免扯皮 这就使用到了 word的审阅功能 1 点击 审阅 点击图中1的图片 点击高级选项进行修改内容的标记设置
  • 2022.04.11【读书笔记】

    文章目录 摘要 研究意义 转录组学意义 技术比较 研究方法 细胞筛选 文库构建 测序 实验方法 实验流程 常见问题 分析内容 重点 分析内容总览 细胞亚群分类 细胞类型频率统计 Marker基因分析 富集分析 样本差异分析 逆时分析 WGC
  • Java查询Mysql数据库时区问题(相差13/14)个小时

    一 CST GMT UTC 1 1 CST 这个代号缩写 并不是一个统一标准 目前 可以同时代表如下 4 个不同版本的时区概念 China Standard Time 中国标准时区 UTC 8 Cuba Standard Time 古巴标准
  • JAVA 泛型中的 的应用场景

    在JAVA 泛型中 经常看到
  • 《市场调查与分析》:在校大学生对微信小程序的使用情况

    目录 一 研究背景和目的 1 1调查背景 1 2调查目的 二 调查内容 三 调查方式 四 调查对象及范围 五 抽样设计 六 调查问卷 七 调查分析 7 1问卷数据 7 2问卷信度效度分析 7 3调查基本情况 八 调查结论 8 1小程序的使用
  • 【Python基础】Python中读取图片的6种方式

    Python进行图片处理 第一步就是读取图片 这里给大家整理了6种图片的读取方式 并将读取的图片装换成numpy ndarray 格式 首先需要准备一张照片 假如你有女朋友的话 可以用女朋友的 没有的话 那还学啥Python 赶紧找对象去吧
  • html修改display属性的值,web开发设计--JS的innerHTML/display属性

    1 innerHTML 属性 innerHTML 属性用于获取或替换 HTML 元素的内容 语法 Object innerHTML 注意 1 Object是获取的元素对象 如通过document getElementById ID 获取的元
  • 获取多选下拉框(select标签设置multiple属性)的值