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'});

                }

        });

});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/61387.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

oracle导入线上数据的全步骤

多租户架构允许oracle数据库成为一个多租户的容器数据库&#xff0c;也就是CDB&#xff0c;container database&#xff0c;与之相对应的&#xff0c;则是插入到这个容器里面的可插拔式数据库&#xff0c;pluggable database 一个CDB可以包含0&#xff0c;1或者多个用户创建的…

华为刷题笔记--题目索引

文章目录 更多关于刷题的内容欢迎订阅我的专栏华为刷题笔记简单题目 更多关于刷题的内容欢迎订阅我的专栏华为刷题笔记 该专栏题目包含两部分&#xff1a; 100 分值部分题目 200 分值部分题目 所有题目都会陆续更新&#xff0c;订阅防丢失 简单题目 –题目分值试卷1华为OD机…

从零开始学习 sg200x 多核开发之 eth0 MAC 地址修改

在 sophpi 中&#xff0c;默认网卡 eth0 的 MAC 地址未配置&#xff0c;是随机生成的。这样就会导致每次重启之后&#xff0c;MAC 地址会改变&#xff0c;从而导致通过 DHCP 获取 IP 地址每次也都在变化。 查看 MAC 地址 前文提到 eth0 自动使能并通过 DHCP 获取 IP 地址&…

网络安全领域的最新动态和漏洞信息

网络安全领域的最新动态和漏洞信息涉及多个方面&#xff0c;以下是对这些信息的详细归纳&#xff1a; 一、网络安全领域最新动态世界互联网大会乌镇峰会召开2024年11月19日至22日&#xff0c;以“拥抱以人为本、智能向善的数字未来——携手构建网络空间命运共同体”为主题的202…

vue中el-select 模糊查询下拉两种方式

第一种&#xff1a;先获取所有下拉数据再模糊查询&#xff0c;效果如下 1&#xff0c;页面代码&#xff1a;speciesList是种类列表List, speciesId 是speciesList里面对应的id&#xff0c;filterable是过滤查询标签 <el-form-item label"种类" prop"species…

华为数字化转型的本质为何是管理变革

随着全球经济的加速数字化转型&#xff0c;企业纷纷进入了数字化时代的大潮。华为作为数字化转型的领军者&#xff0c;已经成功实践了从传统企业向数字化企业的蜕变。对于企业而言&#xff0c;数字化转型不仅仅是新技术的应用&#xff0c;更是一场管理变革。在这场变革的背后&a…

【Linux从青铜到王者】详解ip协议(待完善)

前言 之前我们讲的udp和tcp协议&#xff0c;是处于传输层的协议 而ip协议&#xff0c;是处于传输层下面的网络层的协议 一个报文传输的时候&#xff0c;表面上是一个主机的传输层运输到另一个主机的传输层&#xff0c;本质是其实是由应用层不断向下交付到数据链路层&#xff…

pytorch奇怪错误

ValueError: At least one stride in the given numpy array is negative, and tensors with negative strides are not currently supported. (You can probably work around this by making a copy of your array with array.copy().) 今天在这里遇到了一个奇怪的bug impor…

go-zero(二) api语法和goctl应用

go-zero api语法和goctl应用 在实际开发中&#xff0c;我们更倾向于使用 goctl 来快速生成代码。 goctl 可以根据 api快速生成代码模板&#xff0c;包括模型、逻辑、处理器、路由等&#xff0c;大幅提高开发效率。 一、构建api demo 现在我们通过 goctl 创建一个最小化的 HT…

集群聊天服务器(12)nginx负载均衡器

目录 负载均衡器nginx负载均衡器优势 如何解决集群聊天服务器跨服务器通信问题&#xff1f;nginx的TCP负载均衡配置nginx配置 负载均衡器 目前最多只能支持2w台客户机进行同时聊天 所以要引入集群&#xff0c;多服务器。 但是客户连哪一台服务器呢&#xff1f;客户并不知道哪一…

Springboot+Vue的项目搭建(二)

三个工具 一、Md5加密工具 MD5加密工具是一款用于数据加密的工具&#xff0c;它采用MD5算法将输入的数据转换成一个128位&#xff08;16字节&#xff09;的散列值&#xff08;hash value&#xff09;。以下是对MD5加密工具的详细介绍&#xff1a; MD5&#xff08;Message-Di…

django启动项目报错解决办法

在启动此项目报错&#xff1a; 类似于&#xff1a; django.core.exceptions.ImproperlyConfigured: Requested setting EMOJI_IMG_TAG, but settings are not c启动方式选择django方式启动&#xff0c;以普通python方式启动会报错 2. 这句话提供了对遇到的错误的一个重要线索…

Linux:版本控制器git和调试工具cgdb

✨✨所属专栏&#xff1a;Linux✨✨ ✨✨作者主页&#xff1a;嶔某✨✨ 版本控制器 为了能够更⽅便我们管理这些不同版本的⽂件&#xff0c;便有了版本控制器。所谓的版本控制器&#xff0c;就是能让你了解到⼀个⽂件的历史&#xff0c;以及它的发展过程的系统。通俗的讲就是⼀…

Vue3 provide 和 inject的使用

在 Vue 中&#xff0c;provide 和 inject 是 Composition API 的一对功能&#xff0c;用于父子组件之间的依赖注入。它们的作用是让父组件可以向其所有子组件提供数据或方法&#xff0c;而不需要通过逐层传递 props。 1. provide provide 用于父组件中&#xff0c;提供数据或…

C++11——异常

1.异常概念 异常是一种处理错误的方式&#xff0c;当一个函数发现自己无法处理的错误时就会抛出异常&#xff0c;让函数的调用者处理这个错误 throw&#xff1a;当出现问题时&#xff0c;程序会抛出一个异常&#xff0c;通过 throw 来完成catch&#xff1a;catch 关键字捕获异…

Redis ⽀持哪⼏种数据类型?适⽤场景,底层结构

目录 Redis 数据类型 一、String&#xff08;字符串&#xff09; 二、Hash&#xff08;哈希&#xff09; 三、List&#xff08;列表&#xff09; 四、Set&#xff08;集合&#xff09; 五、ZSet(sorted set&#xff1a;有序集合) 六、BitMap 七、HyperLogLog 八、GEO …

AI风向标|算力与通信的完美融合,SRM6690解锁端侧AI的智能密码

当前&#xff0c;5G技术已经成为推动数字经济和实体经济深度融合的关键驱动力&#xff0c;进入5G发展的下半场&#xff0c;5G与AI的融合正推动诸多行业的数字化转型和创新发展&#xff0c;终端侧AI和端云混合式AI将广泛应用于各类消费终端和各行各业。 在推动5G和AI与各行业场…

简单工厂模式、方法工厂模式

简单工厂模式&#xff08;Simple Factory Pattern&#xff09; 简单工厂模式的核心思想是通过一个工厂类&#xff0c;根据提供的参数来决定创建哪一个具体的产品类实例。 这个模式通常用于产品种类较少&#xff0c;且不经常变化的场景。 interface Product {void create(); }…

torchvision库在进行图片转换操作中报antialias参数没有显式设置会导致不同图片后端中的值不统一的警告信息

诸神缄默不语-个人CSDN博文目录 这个警告信息是我在直接调用已经封装好的视觉模型时出现的&#xff0c;位置是&#xff1a; D:\anaconda3\envs\venv_path\Lib\site-packages\torchvision\transforms\functional.py:1603 警告信息全文是&#xff1a; UserWarning: The default…

【HOT100第四天】除自身以外数组的乘积,矩阵置零,螺旋矩阵,旋转图像

今天感觉是边界值练习专场。。。整体难度不大但是细节还是需要多动手写一写。 238. 除自身以外的数组的乘积 给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意…