用 select 实现多选

最新推荐文章于 2024-11-26 11:16:26 发布
最新推荐文章于 2024-11-26 11:16:26 发布
阅读量154 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/zhaoxd/archive/2013/05/31/3110203.html
版权
<!-- 保存成一个html文件可以观看效果 -->
<HTML> 
<HEAD> 
<TITLE>选择下拉菜单</TITLE> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<META NAME="Description" CONTENT="Power by hill"> 
</HEAD> 
<BODY> 
<p>选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选)，或在选择项上双击进行添加和移除。</p> 
<form method="post" name="myform"> 
<table border="0" width="400"> 
<tr> 
<td width="40%"> 
<select style="height:200px;WIDTH:300px" multiple name="list1" size="10" οndblclick="moveOption(document.myform.list1, document.myform.list2)">
<!--用forEach遍历出所有的option-->
<option value="北京">北京</option> 
<option value="上海">上海</option> 
<option value="山东">山东</option> 
<option value="安徽">安徽</option> 
<option value="重庆">重庆</option> 
<option value="福建">福建</option> 
<option value="甘肃">甘肃</option> 
<option value="广东">广东</option> 
<option value="广西">广西</option> 
<option value="贵州">贵州</option> 
<option value="海南">海南</option> 
<option value="河北">河北</option> 
<option value="黑龙江">黑龙江</option>
 
</select> 
</td> 
<td width="20%" align="center">
<input type="button" value="全部添加" οnclick="moveAllOption(document.myform.list1, document.myform.list2)"><br/> 
<br/>
<input type="button" value="添加" οnclick="moveOption(document.myform.list1, document.myform.list2)"><br/> 
<br/> 
<input type="button" value="移除" οnclick="moveOption(document.myform.list2, document.myform.list1)"><br/> 
<br/> 
<input type="button" value="全部移除" οnclick="moveAllOption(document.myform.list2, document.myform.list1)"> 
</td> 
<td width="40%"> 
<select style="height:200px;WIDTH:300px" multiple name="list2" size="12" οndblclick="moveOption(document.myform.list2, document.myform.list1)"> 
</select> 
</td> 
 
</tr> 
</table> 
值：<input type="text" name="city" size="40"> 
</form> 
<script language="JavaScript"> 
<!--操作全部-->
function moveAllOption(e1, e2){ 
var fromObjOptions=e1.options; 
for(var i=0;i<fromObjOptions.length;i++){ 
fromObjOptions[0].selected=true; 
e2.appendChild(fromObjOptions[i]); 
i--; 
} 
document.myform.city.value=getvalue(document.myform.list2); 
}
 
<!--操作单个-->
function moveOption(e1, e2){ 
var fromObjOptions=e1.options; 
for(var i=0;i<fromObjOptions.length;i++){ 
if(fromObjOptions[i].selected){ 
e2.appendChild(fromObjOptions[i]); 
i--; 
} 
} 
document.myform.city.value=getvalue(document.myform.list2); 
} 
 
function getvalue(geto){ 
var allvalue = ""; 
for(var i=0;i<geto.options.length;i++){ 
allvalue +=geto.options[i].value + ","; 
} 
return allvalue; 
} 
 
function changepos1111(obj,index) 
{ 
if(index==-1){ 
if (obj.selectedIndex>0){ 
obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1)) 
} 
} 
else if(index==1){ 
if (obj.selectedIndex<obj.options.length-1){ 
obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex+1)) 
} 
} 
 
 
} 
 
</script> 
</BODY> 
</HTML> 
 
 
==================效果图==============================
 
用 select 实现多选 - 王超 - 奋斗为容颜

转载于:https://www.cnblogs.com/zhaoxd/archive/2013/05/31/3110203.html

abo38416
关注
select 实现多选
12-27
select 实现多选
原生select实现多选功能
07-02
原生select实现多选功能
js操作select（添加、移除、获取select值）
weixin_33674976的博客
05-22 209
js操作select（添加、移除、获取select值），很实用。如图：代码如下：<html> <html> <TITLE>选择下拉菜单</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <META N...
select实现多选
夏至的博客
07-18 1万+
选择用select下拉框实现多选。<select multiple="multiple" ></select>
js checked
小画家
08-10 656
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <style> .fs-wrap { position: relative; display: inline-block; width: 200px; font-size: 12px; line-height: 1; } .fs-label-wrap { position: rela..
关于select的多选框实现
qq_40085888的博客
11-28 405
借助easyui-combobox来实现, 具体代码如下 &lt;td&gt;多选&lt;/td&gt; &lt;td&gt; &lt;select id="businessContent" style="height: 30px" name="businessContent" multiple=&qu
el-select 下拉框多选实现全选的实现
10-16
文章《el-select 下拉框多选实现全选的实现》介绍了两种实现el-select下拉框全选的方法。 第一种方法是直接在下拉列表中添加一个“全选”选项。该选项是el-option组件，具有特殊的label值“全选”。当用户点击这个...
用javascript实现不按Ctrl实现Multiple Select多选
10-30
### 使用JavaScript实现不按Ctrl键实现Multiple Select多选 在Web开发中，有时我们需要让用户能够更方便地选择多个选项而不必使用键盘上的Ctrl键。这种功能可以提高用户体验，并且适用于那些希望快速完成任务的用户...
jQueryMultipleSelect实现下拉框多选
12-27
jQuery Multiple Select实现下拉框多选，请注意是Multiple 。实例介绍详细，想用的可以直接Copy进去用
简单实现select多选功能
qq_30908729的博客
03-29 1276
实现select按ctrl或shift键多选功能 解决方法： <select id="select" style="min-width:250px; height:250px;" multiple=""> <option value="74-0-0">网站模板</option> <option value="74-120-0"> ...
实现select多选插件
08-03
NULL 博文链接：https://xdjava.iteye.com/blog/1985102
俩个select标签的不同内容选择，select的多选
01-18
实现两个select的不同内容的显示，使得前后不同，实现select的多选，使用bootstrap框架
select 多选的方法
qq_32723447的博客
01-11 647
${ev.eval_type}               "/>    >"/>               //移到右边         $('#add_evalId').click(function(){             //获取选中的选项，删除并追加给对方             $('#select1 option:se
select下拉框实现多选功能
热门推荐
weixin_42442123的博客
11-05 4万+
&lt;select id="all"&gt; &lt;option&gt;牡丹&lt;/option&gt; &lt;option&gt;向日葵&lt;/option&gt; &lt;option&gt;薰衣草&lt;/option&gt; &lt;option&gt;雏菊&lt;/op
select 下拉框实现 多选
weixin_36024625的博客
07-01 875
<html> <head> <meta charset="UTF-8"> <title>下拉框实现多选</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min....
select实现单选和多选
lwj734114646的专栏
10-24 4717
//设置值为0的option为选中 $("#id option[value="0"]").attr("selected",true); //获取多选select的值 var selectVal = $("#id").val();//值得格式为数组，如:["数据1"，"数据2","数据3"] //可以通过下标逐一获取 for(var i=0; i<selectVal.length; i++){
el-select 结合 el-checkBox 实现下拉全选+多选功能
m0_67841039的博客
10-10 1550
el-select 结合 el-checkBox 实现下拉全选+多选功能
html select下拉多选 修改yselect.js插件实现下拉多选，搜索，限制选中，默认回显等操作
请叫我欧皇！的博客
11-26 1427
需求：要在select标签实现下拉多选，搜索，限制选中，默认回显等操作，之前同事用的yselect.js，网上用的简直是寥寥无几，找了半天没找到限制选中的方法，看了源代码才发现根本没有，所以自己加上了，最终实现需求。
el-select实现多选地区
最新发布
01-15
### 使用 `el-select` 实现多选地区 为了实现一个多选地区的选择器，可以利用 Element Plus 的 `el-cascader` 组件来处理层级关系的数据源。对于简单的多选需求，则可以直接采用 `el-select` 配合 `multiple` 属性完成。下面是一个基于 `el-select` 来构建多选地区选择的例子。 #### 地区选项准备 首先定义好地区列表作为下拉菜单中的可选项： ```javascript const regionOptions = [ { value: 'zhejiang', label: '浙江' }, { value: 'fujian', label: '福建'}, // 更多省份... ]; ``` #### Vue 组件模板部分 创建一个包含 `el-select` 和其他必要组件的 HTML 结构： ```html <template> <div class="region-selector"> <el-select v-model="selectedRegions" multiple placeholder="请选择地区" style="width: 100%;"> <el-option v-for="item in regionOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div> </template> ``` #### 数据绑定与事件监听 设置响应式的变量用于存储已选中的值，并通过 watch 或者 change 事件触发相应的逻辑操作： ```javascript <script setup> import { ref, watch } from 'vue'; // 假设这是从服务器获取到的初始数据 let selectedRegions = ref([]); watch(selectedRegions, (newValue) => { console.log('Selected regions:', newValue); }); </script> ``` 上述代码展示了如何使用 `el-select` 创建一个多选区域选择控件[^1]。需要注意的是，如果涉及到更复杂的场景比如级联选择（省市区），则应该考虑使用 `el-cascader` 而不是单纯的 `el-select`。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值