select 多选 左右框添加删除

最新推荐文章于 2021-05-02 02:22:23 发布
最新推荐文章于 2021-05-02 02:22:23 发布
阅读量3.8k 收藏
点赞数
分类专栏： ajax+jquery+js系列 文章标签： button border input action function table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/k8080880/article/details/7482411
版权
<html> 
<head> 
<title>js select</title> 
<script> 
/*移除左边选中的列表项到右边*/ 
function fMoveSelectedOptionsLeftToRight(oLeft,oRight) 
{ 
if(!(oLeft&&oRight)) 
{ 
return; 
} 
if(!hasOptions(oLeft)) 
{ 
return; 
} 
if(oLeft.selectedIndex==-1) 
{ 
oLeft.selectedIndex=0; 
} 
for(var i=0;i<oLeft.options.length;i++) 
{ 
if(oLeft.options[i].selected) 
{ 
var oOption = document.createElement("OPTION"); 
oOption.setAttribute("text",oLeft.options[i].text); 
oOption.setAttribute("value",oLeft.options[i].value); 
oRight.add(oOption); 
} 
} 
clearSelectedOptions(oLeft); 
} 
/*移除左边的所有列表项到右边*/ 
function fMoveAllOptionsLeftToRight(oLeft,oRight) 
{ 
if(!(oLeft&&oRight)) 
{ 
return; 
} 
if(!hasOptions(oLeft)) 
{ 
return; 
} 
for(var i=0;i<oLeft.options.length;i++) 
{ 
var oOption = document.createElement("OPTION"); 
oOption.setAttribute("text",oLeft.options[i].text); 
oOption.setAttribute("value",oLeft.options[i].value); 
oRight.add(oOption); 
} 
clearAllOptions(oLeft); 
} 
/*移除右边选中的列表项到左边*/ 
function fMoveSelectedOptionsRightToLeft(oLeft,oRight) 
{ 
if(!(oLeft&&oRight)) 
{ 
return; 
} 
if(!hasOptions(oRight)) 
{ 
return; 
} 
if(oRight.selectedIndex==-1) 
{ 
oRight.selectedIndex=0; 
} 
for(var i=0;i<oRight.options.length;i++) 
{ 
if(oRight.options[i].selected) 
{ 
var oOption = document.createElement("OPTION"); 
oOption.setAttribute("text",oRight.options[i].text); 
oOption.setAttribute("value",oRight.options[i].value); 
oLeft.add(oOption); 
} 
} 
clearSelectedOptions(oRight); 
} 
/*移除右边的所有列表项到左边*/ 
function fMoveAllOptionsRightToLeft(oLeft,oRight) 
{ 
if(!(oLeft&&oRight)) 
{ 
return; 
} 
if(!hasOptions(oRight)) 
{ 
return; 
} 
for(var i=0;i<oRight.options.length;i++) 
{ 
var oOption = document.createElement("OPTION"); 
oOption.setAttribute("text",oRight.options[i].text); 
oOption.setAttribute("value",oRight.options[i].value); 
oLeft.add(oOption); 
} 
clearAllOptions(oRight); 
} 
/*清空select所有options*/ 
function clearAllOptions(oSelect) 
{ 
if(oSelect) 
{ 
var ops=oSelect.options; 
while(ops.length>0) 
{ 
oSelect.remove(ops.length-1); 
} 
} 
} 
/*清空select所有选中的options*/ 
function clearSelectedOptions(oSelect) 
{ 
if(oSelect) 
{ 
for(var i=0;i<oSelect.options.length;i++) 
{ 
if(oSelect.options[i].selected) 
{ 
oSelect.remove(i--); 
} 
} 
} 
} 
/*判断select是否有options*/ 
function hasOptions(oSelect) 
{ 
if(oSelect) 
{ 
return oSelect.options.length>0; 
} 
return false; 
} 
function checkForm(){ 
var onRight=document.forms[0].rightItem; 
alert(onRight.options.length); 
for(var i=0;i<onRight.options.length;i++){ 
var text=onRight.options[i].text; 
var value=onRight.options[i].value; 
alert(value+" "+text); 
} 
} 
</script> 
</head> 
<body> 
<form name="form1" method="post" action=""> 
<table border="0" align="center" width="75%" cellspacing="0" cellpadding="0"> 
<tr> 
<td> 
<table border="0" align="center"> 
<tr> 
<td> 
<select name="leftItem" style="width:200px" size="10" multiple="multiple"> 
<option value="1">item1</option> 
<option value="2">item2</option> 
<option value="3">item3</option> 
<option value="4">item4</option> 
<option value="5">item5</option> 
</select> 
</td> 
</tr> 
</table> 
</td> 
<td> 
<table border="0" align="center"> 
<tr><td height="30"><input type="button" name="button1" style="width:50px" value=">" onClick="fMoveSelectedOptionsLeftToRight(document.all.leftItem,document.all.rightItem)"></td></tr> 
<tr><td height="30"><input type="button" name="button2" style="width:50px" value=">>" 
onClick="fMoveAllOptionsLeftToRight(document.all.leftItem,document.all.rightItem)"></td></tr> 
<tr><td height="30"><input type="button" name="button3" style="width:50px" value="<" 
onClick="fMoveSelectedOptionsRightToLeft(document.all.leftItem,document.all.rightItem)"></td></tr> 
<tr><td height="30"><input type="button" name="button4" style="width:50px" value="<<" 
onClick="fMoveAllOptionsRightToLeft(document.all.leftItem,document.all.rightItem)"></td></tr> 
</table> 
</td> 
<td> 
<table border="0" align="center"> 
<tr> 
<td> 
<select name="rightItem" style="width:200px" size="10" multiple="multiple"> 
</select> 
</td> 
</tr> 
</table> 
</td> 
</tr> 
</table> 
<table border="0" align="center"> 
<tr height="40"> 
<td><input type="button" value="保存" onClick="checkForm()"></td> 
</tr> 
</table> 
</form> 


</body> 
</html>
找到快乐的根源
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
两个多选select(multiple左右)添加、删除选项和取值实例
09-04
主要介绍了两个多选select(multiple左右)添加、删除选项和取值实例,使用jquery实现,需要的朋友可以参考下
Javascript、JQuery 实现多选 select 的增加与移除效果
yqling2008
03-24 338
 一、Javascript 实现多选 select 的增加与移除效果 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;Select下拉列表框进行多选、移除、...
多选select实现左右添加删除
weixin_38168696的博客
01-08 159
案例：实现效果 　　1.选择监控城市，车辆列表显示对应城市所有车辆 　　2.从左边选择车辆 单击 >> 实现右侧显示添加车辆 ，左侧对应移除已选择车辆 　　3.右侧选中车辆 单击 << 实现右侧移除车辆信息，左侧显示对应移除过来的车辆 逻辑实现： 1.监控城市 select 添加 onchange事件函数，获取城市value 利...
删除select列表中选中的多个值
weoln的专栏
06-23 1809
下面的代码实现删除select列表中同时删除选中的多个值。 New Document //删除选择项function deleteSelected(){ var s = document.getElementById("categoryList"); var length = s.length;
两个多选框(select)之间值的左右上下移动
12-12 880
两个多选框(select)之间值的左右上下移动     两个多选框（select）之间值的左右上下移动的代码请参考：               MultiSelects     http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">               $（function（）{     $（
下拉框多选select多选
03-09
在网页设计和开发中，"下拉框多选select多选"是一个常见的功能，它允许用户在下拉菜单中选择多个选项，而不仅仅是一个。在HTML中，`<select>`元素通常用于创建这样的下拉菜单，但默认情况下，`<select>`只支持单选。...
select选择框内容左右移动
04-08
通过以上步骤，我们可以实现一个功能完善的`select`选择框，其内容可以在用户的操作下左右移动，同时支持添加和删除选项。这种动态交互的设计不仅可以提升用户体验，也可以为开发者提供更多的定制空间。
基于jquery实现select选择框内容左右移动添加删除代码分享
10-23
在本文中，我们将深入探讨如何使用jQuery库来实现一个功能丰富的select选择框，该功能允许用户将选项在两个select元素之间进行左右移动、添加和删除。这个功能在数据管理、选项筛选或用户自定义设置等场景中非常有用...
多选列表框动态添加,移动,删除,全选等操作的简单实例
09-04
本篇文章重点介绍了如何对多选列表框进行动态操作，包括添加、移动、删除以及全选功能。这些操作对于构建交互性强、用户友好的Web应用程序至关重要。 1. **动态添加**： 动态添加是指在运行时根据需求向多选列表框...
多选列表Select之双击删除与添加Demo
weixin_30407613的博客
03-31 77
双击任一Select控件，查看效果： srcA srcB srcC targetA targetB targetC 源码： <html> <head> <script> functionremoveItem(){ varsltSrc=document.getE...
下拉框添加删除按钮
01-14
下拉框添加删除按钮，虽然比不上qq下拉列表。但是也值得借鉴
jQuery实现select多选框左右添加，包括双击事件
停住了过去，却停不住时间
09-12 1082
选项1  选项2  选项3  选项4  选项5  选项6  选项7  选项8                " />         " />                                   选项9             $("#add").click(function(){   $("#fi
HTML+JS实现左边select移动到右边select
weixin_41903771的博客
10-10 3489
如图所示：左右两个select标签，左边有10个option， 要求实现双击左侧选项即可移动到右侧，选择选项后点击“批量右移”可以移动到右侧，点击“全部右移”则全部一次性右移到右侧。 实现代码如下： &lt;div id="" style="position: absolute;left: 10px;top: 20px;"&gt; &lt;select style="width: 7...
select实现左右列表的添加和删除
iteye_7547的博客
09-21 378
下拉列表 .centent{ float: left; width: 300px; height: 200px; } span{ background-color:yellow; } $(function(){ $("#add").click(function(){ /* //获取下拉框选中的选项 $option=$("#s1 op...
前端专题 JQuery实现左右框添加内容
weixin_44131922的博客
08-09 213
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> select{ width: 200px; height: 300px; } </style> <script type="text/javascript" src="js/
linux 脚本select菜单,Shell：如何写一个多选菜单的脚本
weixin_39552472的博客
05-02 340
Blog：博客园 个人翻译自How to Create a Multiple Choice Menu in Bash Scripts目录多选菜单脚本介绍配置输入提示创建预定选项列表创建预选菜单使用case语句创建更多可靠的选项关闭select循环和case语句有很多方法可以读取Bash脚本中的用户输入。 但是，允许用户键入输入会带来一些问题。 主要问题是输入验证，您必须在其中考虑所有可能的输入。...
select实现多选(麻烦版)
cixinliunian的博客
08-24 584
1          var o = document.getElementById("myselect");         var str = "";         for (var i = 0; i             if (o.options[i].selected) {                 str += o.options[i].value +
el-select多选不要删除图标
最新发布
07-19
el-select组件是Element UI库中的下拉选择框，它支持单选或多选模式。如果你想在多选模式下隐藏删除图标，可以在`el-select`组件的选项中设置每个选项的对象，然后在该对象上添加一个自定义的属性，比如`removeIcon: false`，这样就不会显示默认的删除图标。 示例代码如下： ```html <el-select multiple placeholder="请选择" v-model="selectedValues"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :remove-icon="false"> <!-- 隐藏删除图标 --> </el-option> </el-select> <script> data() { return { selectedValues: [], options: [ { value: 'option1', label: '选项一', removeIcon: false }, { value: 'option2', label: '选项二', removeIcon: false }, // ... ] }; } </script> ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值