select标签添加multiple属性后，页面呈现的样式发生改变，如何修改

最新推荐文章于 2024-08-29 17:08:40 发布
最新推荐文章于 2024-08-29 17:08:40 发布
阅读量9.5k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CryBoyJava_WF/article/details/61919033
版权

select标签当添加multiple属性后，是指明该下拉框可以进行多选，但是添加上multiple属性后，页面的呈现是样式会发生改变

也就是 页面会将所有的下拉框的值全部展示出来

此时，需要在select标签的内部再次添加属性：size=“” 里面的数值根据select中有几个值而定

这样基本样式可以改变

进行回填的时候，数值也不会再次发生改变

代码如下：

<select id="areaId" name="hmmpAreaid" class="input-medium" multiple="multiple" size="1">
    <option  value="" selected="selected" disabled>请选择</option>
</select>

页面效果：


回填后的效果：


select多选 multiple的使用示例
09-04
使用multiple可以实现select多选，本例将为大家介绍下select多选 multiple的使用，新手朋友们可以学习下
select标签multiple属性的使用方法
gaohuanjie的专栏
07-10 1万+
select标签multiple属性的使用方法
【Material-UI】Select 组件：Multiple Select 功能详解
最新发布
lph159的博客
08-29 1176
Multiple Select 是指允许用户同时选择多个选项的下拉菜单。与单选模式不同，Multiple Select 可以返回一个数组，其中包含用户选择的多个值。这种功能在需要用户从大量选项中筛选并选择多个条目时非常有用，例如多项过滤器、批量操作选择等。Material UI 的Select组件通过设置multiple属性可以启用 Multiple Select 模式。
从多选(multiple)的select中得到所选结果
一个大龄码农的专栏
08-26 348
&lt;select name="classid" multiple&gt; &lt;option value="1"&gt;1&lt;/option&gt; &lt;option value="2"&gt;2&lt;/option&gt; &lt;option value="3&quo
Vue使用ElementUi表单多级级联时引发的表单错乱问题，闹心的Bug哪都有，这个最烦人
04-12 1728
其实这个问题出现的场景还是挺费心思的，因为业务需要，我们有一个多级表单的场景，而且某个表单可能会级联另一个表单域的出现或隐藏，而且我还使用了v-if判断....这就是最糟心的地方，大部分是因为v-if引起的表单错乱........我们的表单域样式：表单域代码：下面是基本上修好了，将v-if替换为v-show就好了大部分了： 出现问题的样式：当我选择OPRF的时候，就会出现级联关系，并且触发表单校验，这是有问题的时候样式，代码我就不贴了： 1.当使用过级联关系后的表单，点击取消之后，再次单击创建任务，表单
vue antd项目实战——select组件mode=“multiple“多选模式下限制选择个数
XSL_HR的博客
03-27 6154
往期知识调用（步骤不懂就看这儿）
ReactJS+antd+select标签组件（可单选，多选，可将输入项作为选项）
u012891737的专栏
05-26 3111
MySelectTag代码块如下： import React, { useState } from 'react'; import { Select } from 'antd'; /** * @param initialValue 默认值 * @param onChange 值改变时调用方法 * @param isSingle 是否单选 * @param data 选项初始值 * @returns {*} * @constructor */ const MySelectTag = (.
select标签multiple属性的使用方法.zip
07-10
要启用多选功能，只需在`<select>`标签上添加`multiple`属性： ```html <select multiple> <option value="value1">Option 1 <option value="value2">Option 2 <!-- 更多选项... --> </select> ``` 一旦添加了`...
JS更改select内option属性的方法
10-23
它展示了如何利用JavaScript进行跨窗口数据交互，以及如何动态地修改页面元素的属性，这些都是在进行网页开发时常用到的技能。通过这种动态操作，开发者可以创建更为动态和响应式的网页界面，从而提升用户体验。 ...
JSP页面中如何用select标签实现级联
10-27
同时，为了在选择某个选项后能够触发对应的操作，我们需要为select标签添加onchange事件处理器。 onchange事件处理器通常会调用一个JavaScript函数。这个函数的职责是根据当前选中的选项，向服务器发送请求（例如...
js里怎么取select标签里的值并修改
10-27
在JavaScript中，获取和修改`select`标签中的值是常见的操作，特别是在动态更新表单或者交互式用户界面中。在给定的标题和描述中，我们关注的是如何找到具有特定文本或值的`option`元素，并对其进行修改。下面将详细...
antd Select自定义下拉选项和回填
chunmeizhang_88的博客
02-08 6725
react antd Select自定义下拉选项和回填option
Element Select 选择器自定义样式在多选时出现样式错乱解决
weixin_40400844的博客
02-26 4630
Element Select 选择器自定义样式在多选时出现样式错乱解决问题描述开发解决方法 问题描述 在使用el-select组件时，需求提出的要求： 1、select可以随便设置高度（不受size属性制约）； 2、允许select多选显示tag并使高度自适应； 开发 设置select高度样式，注意，这里使用的是scss修改样式： <div class="elSelectBox"> <el-select v-model="valMult" multiple
<select> 标签的 multiple 属性规定可同时选择多个选项。
gtlishujie的博客
08-19 1万+
1.使用multiple属性可以实现多选 multiple="multiple" size="2"> Volvo Saab Opel Audi 2.     pageEncoding="GBK"%>                                报表定制          .tabstyle table tr td {     b
el-select使用了多选时，选中多个会撑开原始高度，样式错乱，使用tag展示，一行显示全部内容，超过显示长度并以...显示的方法
热门推荐
qq_42780155的博客
06-03 2万+
使用el-select的多选下拉选择时，如果默认的选择会撑开input，显示所选的全部内容； 这样子很难看，样式还不整齐。 文档中有tag的形式展现，设置collapse-tags属性将它们合并为一段文字： 就不会出现上述的情况了。 但是当多选的内容多长的时候，后面还是会撑开换行，照样使样式不整齐： 看了上面的element元素发现： 这时候需要加内容一行显示，内容超出隐藏，溢出时显示省略标记…的写法了！ css基本功大显身手的时候到啦！（记不起来或者不会的小伙伴记得百度哈…） word-break
layui中layui-form与select2下拉多选样式冲突的解决方案
Sweet_Waf的博客
06-15 6043
layui中layui-form与select2下拉多选样式冲突的解决方案@TOC 去掉搜索按钮 打开控制面板f12 查看元素 可以看到搜索按钮是由after动态生成，找到这个样式文件，然后注释 清除浏览器缓存（ctrl+shift+del），刷新，可以看到 小按钮已经没有了。 去除layui-form的搜索框 还是老样子 查看页面元素f12 确定元素所在位置，通过jquery删...
element-ui中table组件多选框选中之后样式改变
yangyanqin2545的博客
09-23 2214
element-ui中table组件多选框选中之后样式改变 最终实现的效果图： <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" height="calc(100% - 150px)" :header-cell-style="{
element ui中select多选框change选择获取选项的所有字段信息
m0_67624022的博客
09-13 4258
事件，此时可以通过该事件的回调函数来获取选中的选项的所有字段信息。当多选框选项发生改变时，会触发。在 Element UI 的。事件来获取选项的所有字段信息。
el-select 中 filterable(可搜索) multiple(多选)同时使用时，样式显示问题
qq_42947973的博客
11-11 1540
el-select 中 filterable(可搜索) multiple(多选)都使用时，样式显示问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值