原生html 设置select 多选

最新推荐文章于 2024-05-15 15:39:09 发布
最新推荐文章于 2024-05-15 15:39:09 发布
阅读量8.6k 收藏 5
点赞数 5
文章标签： select multiple
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37818095/article/details/82876367
版权

先看效果图，没错 下拉框变成这个鬼样子了

上代码

<select  multiple="multiple">
    <option value="1" selected>1</option>
    <option value="2" selected>2</option>
    <option value="3" >3</option>
    <option value="4" selected>4</option>
    <option value="5">5</option>
</select>

看到了  multiple 有没有很熟悉，没错就是input type=‘file' 的那个属性 多文件上传

哦 对了，选择的时候记得按住ctrl 才能多选

一行注释
关注
html+css 实现单选和多选按钮（input checkbox按钮 radio按钮）
宝码香车的博客
07-29 1104
纯css实现，没有js。点击事件是input的checked实现的。含具体代码帮助大家深入理解，彻底掌握！直接看代码，可以一键复制，查看效果。
原生select实现多选功能
07-02
原生select实现多选功能
HTML中select标签单选多选详解
weixin_30904593的博客
12-19 736
select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 <select> 表单数据提交给服务器时包括 name 属性。 一、基本用法： <select> <option value ="volvo">Volvo</option> <op...
原生HTML Select下拉多选 + vue
fearlessnesszhang的博客
06-23 2025
bootstrap select多选
html 原生下拉菜单 select ，多选 multiple
热门推荐
FungLeo's Blog
09-23 2万+
1 2 3 4 5 只要加上 multiple 参数即可实现多选。做个记录。
HTML ＜hr＞ 标签
weixin_50662941的博客
09-17 474
标题HTML <hr> 标签 什么是<hr> 标签？ <hr> 标签在 HTML 页面中创建一条水平线。 水平分隔线可以在视觉上将文档分隔成各个部分。 实例 <h1> > 这是标题</h1> <hr /> <p> 这是一些内容</p> 全局属性 <hr> 标签支持 HTML 中的全局属性。 事件属性 <hr> 标签支持 HTML 的事件属性。 http://www.xinbi
select多选下拉框美化
08-19
"select多选下拉框美化"这个主题就是关于如何使用JavaScript库jQuery（jq）和CSS技术来提升HTML原生select元素的视觉效果和交互体验。下面我们将深入探讨这个话题。 首先，原生的HTML select元素在不同浏览器上展示...
Bootstrap select多选下拉框实现代码
11-30
Bootstrap Select 是一个基于 Bootstrap 框架的插件，它扩展了原生 HTML `<select>` 元素的功能，提供了丰富的自定义选项、多选、搜索过滤等特性，使得下拉菜单更加美观和实用。在本篇文章中，我们将讨论如何使用 ...
layui多选下拉框样式，整套layui-select-multiple
12-09
综上所述，Layui的“layui-select-multiple”提供了一整套美观且功能丰富的多选下拉框解决方案，适合HTML5项目，能够帮助开发者快速构建具有出色用户体验的Web应用。其样式可定制，组件API易用，使得在网页中实现...
Select多选
10-17
其中，“Select多选”插件——layui-select-ext，就是针对下拉选择框的多选功能进行优化和增强的一个杰出实例。 layui-select-ext的核心功能在于提供了一个可多选的下拉框，使得用户在选择数据时不再局限于单个选项...
原生select多选
08-02
原生select多选是指在HTML中使用select元素，并设置multiple属性，允许用户选择多个选项的功能。 在原生select多选中，用户可以按住Ctrl键或者Shift键，然后点击选项，来选择多个选项。已选择的选项会显示为高亮。 ...
原生select下拉多选框展示
07-12
原生select下拉多选框展示
html多选下拉框 ，CheckBox的Select组件 可多选的下拉框
04-09
html多选下拉框 ，CheckBox的Select组件。可多选的下拉框。
俩个select标签的不同内容选择，select的多选
01-18
实现两个select的不同内容的显示，使得前后不同，实现select的多选，使用bootstrap框架
HTML中select标签单选多选用法详解
12-02
select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 <select> 表单数据提交给服务器时包括 name 属性。 一、基本用法： 复制代码代码如下: <select> Volvo Saab Opel Audi </select> 其中，</option
原生js实现select多选
weixin_45428021的博客
11-09 2704
【代码】原生js实现select多选。
html'中select多选,在HTML中select标签如何实现单选和多选
weixin_39640849的博客
07-04 4346
在HTML中select标签如何实现单选和多选发布时间：2020-09-29 17:01:54来源：亿速云阅读：105作者：小新这篇文章主要介绍了在HTML中select标签如何实现单选和多选，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多...
原生js实现Select下拉框，多选、搜索（Vue2版本）
weixin_54403672的博客
05-15 963
原生js实现Select下拉框，多选、搜索
原生js select 多选
最新发布
09-03
在JavaScript中，原生`<select>`元素默认只能单选，如果你想要创建一个多选框（Multiple Selection），你可以采用一些技巧或者借助第三方库来实现。以下是一种基本的手动实现方法： ```html <select multiple> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> <!-- 更多选项... --> </select> <script> // JavaScript部分用于获取选择项并操作 var selects = document.querySelectorAll('select[multiple]'); selects.forEach(function(select) { select.addEventListener('change', function() { // 当多选框发生变化时，这里可以获取用户的选择 var selectedOptions = Array.from(select.options).filter(function(option) { return option.selected; }); console.log('用户选择了:', selectedOptions.map(function(option) { return option.value; })); }); }); </script> ``` 在这个例子中，我们添加了`multiple`属性到`<select>`标签，使得它变为一个多选框。然后通过`addEventListener`监听`change`事件，每当用户做出选择时，就会触发回调函数，获取并处理已选中的选项。 请注意，现代浏览器通常提供了更完善的API，比如`HTMLSelectElement`的`elements`属性可以直接返回所有选中的选项。然而，上述代码适用于较老的浏览器版本。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值