select 多选

最新推荐文章于 2024-08-17 12:54:01 发布
最新推荐文章于 2024-08-17 12:54:01 发布
阅读量88 收藏
点赞数
分类专栏： javascript 文章标签： javascript select 多选 ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yingshuaaa/article/details/84253886
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>select 多选</title>
<script language="javascript">
<!--
function show(){
var sel = document.forms["form1"].s1;
var s = "";
for(var i=0;i<sel.options.length;i++){
if(sel.options[i].selected)
s += sel.options[i].innerText + ",";
}
if(s!="") s = s.substr(0,s.length-1);
alert(s);
}
-->
</script>
</head>
<body>
<form name="form1" id="form1">
<div width="300" height="160" border="1">
<select name= "s1" style= "WIDTH: 100px " multiple="multiple" size=15 id="list" >
<option>XHTML</option>
<option>CSS</option>
<option>JAVASCRIPT</option>
<option>XML</option>
<option>PHP</option>
<option>C#</option>

<option>JAVASCRIPT</option>
<option>XML</option>
<option>PHP</option>
<option>C#</option>

<option>JAVASCRIPT</option>
<option>XML</option>
<option>PHP</option>
<option>C#</option>

<option>JAVASCRIPT</option>
<option>XML</option>
<option>PHP</option>
<option>C#</option>
<option>JAVA</option>
<option>C++</option>
<option>PERL</option>
</select>
</div>
<input name="button" type="button" οnclick="show()" value="ShowOptionText" />
</form>
</body>
</html>
yingshuaaa
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Select多选
web
12-03 5794
今天写这个select多选，明明很简单的功能，but，因为功能稍微有点复杂，我又粗心大意，导致我的bug不断，整个功能写完后，感觉自己咋就那么蠢呢？啊！气死了，我要反思 我的是angular2项目，使用的NG-ZORRO组件库 普通的select多选 先了解官网的代码 官网示例 官网代码 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'nz-demo-select-multiple', temp
antd select多选_Select 选择器
weixin_29261711的博客
12-29 1415
import { Input, Select, Button, Icon } from 'antd';import jsonp from 'jsonp';import querystring from 'querystring';import classNames from 'classnames';const Option = Select.Option;let timeout;let curr...
select实现多选、全选、全不选
热门推荐
cat_pp的博客
03-08 5万+
今天使用select下拉框实现了全选，全不选和多选的功能，效果如图： 1、html代码：为select标签设置multiple属性为true <select id="myselect" multiple="true"> <option value="1">java</option> <option value="2">javaSE</option> <option va
html select 多选传值,Js读取select多选的几种方法
weixin_34537864的博客
06-07 881
首先，编写HTML如下：操作系统：windowxpwindow7window10mac os方法function readselect2() {// 方法一var os = document.getElementById("os");var msg = "被选中的项：";for (var i = 0; i < os.length; i++) {if (os.options[i].select...
antd select多选_antd多选下拉框一行展示的实现方式
weixin_32955455的博客
03-03 6003
我们都知道antd的select多选时，如果下拉框宽度不足，则自动浮动到下一行将下拉框撑大，但是这回影响到页面的整体布局。我们期望的效果是，下拉框只显示一行的值，超出一行的部分自动隐藏。下面有2种方案来实现这个效果。1.利用浮动原理设置下拉框的最大高度为一行的高度，然后超出的部分隐藏。.ant-select-selection--multiple {max-height: 32px;overflo...
Layui 下拉select多选实现
无名大白
12-22 3645
{name: '综合室', value: '综合室'},//, selected: true。{name: '放射源安全室', value: '放射源安全室'},{name: '质控信息室', value: '质控信息室'},{name: '实验分析室', value: '实验分析室'},{name: '监测应急室', value: '监测应急室'},var mo_deptment="综合室,质控信息室";
antd select多选_Antd-Select组件的深入用法
weixin_39692254的博客
12-19 1685
`后下班!过会你会发现有多绝望..这下拉框加载了10s还没出来！?这时候先想着去antd文档上找解决方法,无果后百度、SF、google....因为antd每次都会重新渲染,所以要降低卡顿时间,唯一办法就是减少渲染的数量发现问的人倒挺多,真正解决的回答没见到几个(我还没找到..)有的劝着放弃吧,加了那么多用户也不会看(确实如此),改做成一个搜索下拉框.稍微执拗一点的继续挣扎,终于找到了一个能优化加...
antd select多选_antdesign - antd Select多选的时候如何不让值放进input里面？
weixin_39932300的博客
12-19 1484
问 题现在准备做一个多选的下拉框，但是我不想让选择的值回填到select里面，我只需要取值，有必要我可以给select设置一个默认的值，永远只显示那一个值，下拉框我选择了之后只需要打勾选中就可以了！有人知道怎么解决吗？如图，我只想让下面的选项中打勾就可以了，上面输入框里面不需要显示我选择的，怎么破？解决方案额。。实现思路是这样的，首先可以看到每次选中一个选项的时候会新增一个li标签，所以第一步我们...
php select数据多选,php-select多选衍生
weixin_39627405的博客
03-17 317
今天在项目碰到select双向选择的问题，点击选择会出现如下图，添加，全部添加，取消，全部取消这四个功能，在网上有现成的js代码，我就不一一赘述。首先我要说我遇到的问题，当点击确定，会触发一个事件，如test方法，那就可以这样写。function test(){//右边的select框，一定会有name值，当你从左边的列表选择其中的人员到右边的select框，这样我们可以获取右边select的值f...
antd select多选_如何在antd中获取Select选项值
weixin_39867594的博客
12-19 3276
使用validateFields检查字段是否为空。import React from "react";import ReactDOM from "react-dom";import "antd/dist/antd.css";import "./index.css";import { Select, Button, Form } from "antd";const Option = Select.O...
下拉框多选select多选
03-09
在网页设计和开发中，"下拉框多选select多选"是一个常见的功能，它允许用户在下拉菜单中选择多个选项，而不仅仅是一个。在HTML中，`<select>`元素通常用于创建这样的下拉菜单，但默认情况下，`<select>`只支持单选。...
基于layui的select多选解决方案
11-01
在layui的基础上，把select选择框可更改为多选框，并可进行搜索、筛选值。下拉框内容可物理分页配置、自定义搜索模式(远程搜索)。 存在layui时, 同样也能直接使用xmSelect, 不用必须layui.xmSelect 具有多选上限设置...
select多选下拉框美化
08-19
总之，"select多选下拉框美化"是一个涉及前端多个领域的任务，需要结合jQuery的动态操作和CSS的样式定制，通过创新的布局和交互设计，为用户提供更优质的使用体验。在实际应用中，开发者还需要根据项目需求和用户...
select多选 multiple的使用示例
09-04
本示例主要讲解如何使用`<select>`的`multiple`属性创建一个多选下拉框，并通过JavaScript来处理用户的选择。 首先，`<select>`标签的`multiple`属性是关键，它告诉浏览器该下拉列表支持多选。例如： ```html ...
用javascript实现不按Ctrl实现Multiple Select多选
10-30
### 使用JavaScript实现不按Ctrl键实现Multiple Select多选 在Web开发中，有时我们需要让用户能够更方便地选择多个选项而不必使用键盘上的Ctrl键。这种功能可以提高用户体验，并且适用于那些希望快速完成任务的用户...
vue2前端阿里云oss服务端签名直传
weixin_74285634的博客
08-13 286
generatePresignedUrlApi是由后端提供的接口 来获取密钥。
【vue教程】五. Vue 的路由管理
前端探索者
08-13 1117
Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，实现页面的动态加载和导航。路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由。我们还探讨了路由守卫的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。
CSS的:defined伪类：选择已定义元素的新选择器
最新发布
2401_85743969的博客
08-17 349
在CSS中，伪类用于选择元素的不同状态或行为。:defined伪类是CSS4的一个特性，用于选择已经在文档中定义的元素。
【无标题】
weixin_42348009的博客
08-14 172
静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
前端 select多选
06-08
在前端中，可以使用一些 UI 库来实现 select 多选功能，如 Element UI、Ant Design、Bootstrap 等。 以 Element UI 为例，可以使用其提供的 el-select 组件来实现多选功能。只需要在 el-select 组件上添加 multiple...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值