当前位置: 首页 > news >正文

html中select标签的选项携带多个值

搜索参考资料:SELECT标签中的选项可以携带多个值吗?

【摘抄】:

它可能有一个select选项中的多个值,如下所示。

<select id="ddlEmployee" class="form-control">

<option value="">-- Select --</option>

<option value="1"      data-city="Washington" data-doj="20-06-2011"    >John</option>

<option value="2"      data-city="California"     data-doj="10-05-2015"    >Clif</option>

<option value="3"      data-city="Delhi"             data-doj="01-01-2008"    >Alexander</option>

</select>

 你可以使用jquery获得更改事件的选定值,如下所示。

 $("#ddlEmployee").change(function () { alert($(this).find(':selected').data('city')); });

【实践总结】:

使用中,注意,data-后需要用小写;data-pageType="2" 这个,data('pageType')会失效, 需要用小写 data('pagetype');

thymeleaf 中示例

<div class="col-sm-3">

        <select id="typeId" name="typeId" class="form-control">

                <ul th:each="productType:${productTypeList}">

                        <option th:if="${productType.typeUsing!=4}"

                                th:data-pagetype="${productType.pageType}"

                                th:value="${productType.id}"

                                th:text="${productType.typeName}"

                                th:selected="${productType.id==news.typeId}">

                        </option>

                </ul>

        </select>

</div>

js部分(采用的 jquery)

$(function(){

        $('#typeId').on('change',function(){

                //在这里执行你需要的操作

                let selectedOption = $(this).find(':selected');

                var pageType = selectedOption.data('pagetype');

                if(pageType==4){

                        $('#commentOpened').css({display:'block'});

                }else{

                        $('#commentOpened').css({display:'none'});

                }

        });

});

相关文章:

html中select标签的选项携带多个值

搜索参考资料&#xff1a;SELECT标签中的选项可以携带多个值吗&#xff1f; 【摘抄】&#xff1a; 它可能有一个select选项中的多个值&#xff0c;如下所示。 <select id"ddlEmployee" class"form-control"> <option value"">-- S…...

Lambda表达式如何进行调试

一、概述 Java8提供了lambda表达式&#xff0c;方便我们对数据集合进行操作&#xff0c;我们使用lambda表达式的时候&#xff0c;是不是有这样的疑问&#xff0c;如何对执行过程中的中间数据进行调试呢&#xff1f; 二、例子 在下面的例子中&#xff0c;我们实现随机最多生成…...

C++ —— 剑斩旧我 破茧成蝶—C++11

江河入海&#xff0c;知识涌动&#xff0c;这是我参与江海计划的第2篇。 目录 1. C11的发展历史 2. 列表初始化 2.1 C98传统的{} 2.2 C11中的{} 2.3 C11中的std::initializer_list 3. 右值引用和移动语义 3.1 左值和右值 3.2 左值引用和右值引用 3.3 引用延长生命周期…...

HTML5好看的音乐播放器多种风格(附源码)

文章目录 1.设计来源1.1 音乐播放器风格1效果1.2 音乐播放器风格2效果1.3 音乐播放器风格3效果1.4 音乐播放器风格4效果1.5 音乐播放器风格5效果 2.效果和源码2.1 动态效果2.2 源代码 源码下载万套模板&#xff0c;程序开发&#xff0c;在线开发&#xff0c;在线沟通 作者&…...

C++设计模式行为模式———迭代器模式中介者模式

文章目录 一、引言二、中介者模式三、总结 一、引言 中介者模式是一种行为设计模式&#xff0c; 能让你减少对象之间混乱无序的依赖关系。 该模式会限制对象之间的直接交互&#xff0c; 迫使它们通过一个中介者对象进行合作。 中介者模式可以减少对象之间混乱无序的依赖关系&…...

FFmpeg 4.3 音视频-多路H265监控录放C++开发十五,解码相关,将h264文件进行帧分隔变成avpacket

前提 前面我们学习了 将YUV数据读取到AVFrame&#xff0c;然后将AVFrame通过 h264编码器变成 AVPacket后&#xff0c;然后将avpacket直接存储到了本地就变成了h264文件。 这一节课&#xff0c;学习解码的一部分。我们需要将 本地存储的h264文件进行帧分隔&#xff0c;也就是变…...

力扣 LeetCode 104. 二叉树的最大深度(Day7:二叉树)

解题思路&#xff1a; 采用后序遍历 首先要区别好什么是高度&#xff0c;什么是深度 最大深度实际上就是根节点的高度 高度的求法是从下往上传&#xff0c;从下往上传实际上就是左右中&#xff08;后序遍历&#xff09; 深度的求法是从上往下去寻找 所以采用从下往上 本…...

如何高效实现汤臣倍健营销云数据集成到SQLServer

新版订单同步-&#xff08;Life-Space&#xff09;江油泰熙&#xff1a;汤臣倍健营销云数据集成到SQL Server 在企业信息化建设中&#xff0c;数据的高效集成和管理是提升业务运营效率的关键。本文将分享一个实际案例——如何通过新版订单同步方案&#xff0c;将汤臣倍健营销云…...

Vue3中使用:deep修改element-plus的样式无效怎么办?

前言&#xff1a;当我们用 vue3 :deep() 处理 elementui 中 el-dialog_body和el-dislog__header 的时候样式一直无法生效&#xff0c;遇到这种情况怎么办&#xff1f; 解决办法&#xff1a; 1.直接在 dialog 上面增加class 我试过&#xff0c;也不起作用&#xff0c;最后用这种…...

具身智能之Isaac Gym使用

0. 简介 Isaac Gym 是由 NVIDIA 提供的一个高性能仿真平台&#xff0c;专门用于大规模的机器人学习和强化学习&#xff08;RL&#xff09;任务。它结合了物理仿真、GPU加速、深度学习框架互操作性等特点&#xff0c;使得研究人员和开发者可以快速进行复杂的机器人仿真和训练。…...

【大数据学习 | Spark】spark-shell开发

spark的代码分为两种 本地代码在driver端直接解析执行没有后续 集群代码&#xff0c;会在driver端进行解析&#xff0c;然后让多个机器进行集群形式的执行计算 spark-shell --master spark://nn1:7077 --executor-cores 2 --executor-memory 2G sc.textFile("/home/ha…...

《Python制作动态爱心粒子特效》

一、实现思路 粒子效果&#xff1a; – 使用Pygame模拟粒子运动&#xff0c;粒子会以爱心的轨迹分布并运动。爱心公式&#xff1a; 爱心的数学公式&#xff1a; x16sin 3 (t),y13cos(t)−5cos(2t)−2cos(3t)−cos(4t) 参数 t t 的范围决定爱心形状。 动态效果&#xff1a; 粒子…...

Jmeter 如何导入证书并调用https请求

Jmeter 如何导入证书并调用https请求 通过SSL管理器添加证书文件 支持添加的文件为.p12&#xff0c;.pfx&#xff0c;.jks 如何将pem文件转换为pfx文件&#xff1f; 在公司内部通常会提供3个pem文件。 ca.pem&#xff1a;可以理解为是根证书&#xff0c;用于验证颁发的证…...

Python程序15个提速优化方法

目录 Python程序15个提速优化方法1. 引言2. 方法一&#xff1a;使用内建函数代码示例&#xff1a;解释&#xff1a; 3. 方法二&#xff1a;避免使用全局变量代码示例&#xff1a;解释&#xff1a; 4. 方法三&#xff1a;使用局部变量代码示例&#xff1a;解释&#xff1a; 5. 方…...

足球虚拟越位线技术FIFA OT(二)

足球虚拟越位线技术FIFA OT&#xff08;二&#xff09; 在FIFA认证测试过程中&#xff0c;留给VAR系统绘制越位线的时间只有90秒&#xff08;在比赛中时间可能更短&#xff09;&#xff0c;那么90秒内要做什么事呢&#xff0c;首先场地上球员做出踢球动作&#xff0c;然后VAR要…...

centos7.9单机版安装K8s

1.安装docker [rootlocalhost ~]# hostnamectl set-hostname master [rootlocalhost ~]# bash [rootmaster ~]# mv /etc/yum.repos.d/* /home [rootmaster ~]# curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo [rootmaster ~]# cu…...

图像编辑一些概念:Image Reconstruction与Image Re-generation

图像编辑本质上是在“图像重建”&#xff08;image reconstruction&#xff09;和“图像再生成”&#xff08;image re-generation&#xff09;之间寻找平衡。 1. Image Reconstruction&#xff08;图像重建&#xff09; 定义&#xff1a;图像重建通常是指从已有的图像中提取信…...

【STM32】在 STM32 USB 设备库添加新的设备类

说实话&#xff0c;我非常想吐槽 STM32 的 USB device library&#xff0c;总感觉很混乱。 USB Device library architecture 根据架构图&#xff1a; Adding a custom class 如果你想添加新的设备类&#xff0c;必须修改的文件有 usbd_desc.cusbd_conf.cusb_device.c 需要…...

【Redis】Redis实现的消息队列

一、用list实现【这是数据类型所以支持持久化】 消息基于redis存储不会因为受jvm内存上限的限制&#xff0c;支持消息的有序性&#xff0c;基于redis的持久化机制&#xff0c;只支持单一消费者订阅&#xff0c;无法避免消息丢失。 二、用PubSub【这不是数据类型&#xff0c;是…...

# Spring事务

Spring事务 什么是spring的事务&#xff1f; 在Spring框架中&#xff0c;事务管理是一种控制数据库操作执行边界的技术&#xff0c;确保一系列操作要么全部成功&#xff0c;要么全部失败&#xff0c;从而维护数据的一致性和完整性。Spring的事务管理主要关注以下几点&#xf…...

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

无法与IP建立连接,未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...