select multiple左右添加和删除功能

最新推荐文章于 2021-12-07 17:35:41 发布
最新推荐文章于 2021-12-07 17:35:41 发布
阅读量182 收藏
点赞数
分类专栏： js 文章标签： jQuery ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_9849/article/details/81687574
版权
下拉列表
<table width="95%" cellpadding="0" align="center" class="listshow" border="1" cellspacing="0">
<tr>
<td colspan="4" align="center">选择分包</td>
</tr>
<tr>
<td class="black" width="30%" align="center" height="150">
<select id="fb_list" multiple="multiple" style="text-align:center;width:300px;height:150px;">

</select>
</td>
<td align="center" width="5%">
<input type="button" id="add" value="添加>>" />
<br/>
<br/>
<input type="button" id="delete" value="<<删除" />
</td>
<td class="black" width="30%" align="center">
<select id="select_list" multiple="multiple" style=" text-align:center;width:300px;height:150px;">

</select>
</td>
</tr>
</table>

jQuery代码:
/**
*动态的给左边的下拉列表创建选项
*具体情况可以从数据库读取数据动态创建选项
*/
$(document).ready(function(){
for(var i=1;i<=5;i++)
{
$("#fb_list").append("<option value='"+i+"'>公开招标小型机采购00"+i+"</option>");
}
})

$(function(){
$("#add").click(function(){
if($("#fb_list option:selected").length>0)
{
$("#fb_list option:selected").each(function(){
$("#select_list").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");
$(this).remove();
})
}
else
{
alert("请选择要添加的分包！");
}
})
})


$(function(){
$("#delete").click(function(){
if($("#select_list option:selected").length>0)
{
$("#select_list option:selected").each(function(){
$("#fb_list").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");
$(this).remove();
})
}
else
{
alert("请选择要删除的分包！");
}
})
})


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Select Demo </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<style>
center
{
font-size:12px;
color:red;
font-weight:bold;
}
select
{
font-size:12px;
color:green;
}
</style>

<BODY>
<span id='feedback'></span>

<form method="post" name="myform">
<table border="0" width="400">
<tr>
<td><CENTER>可选择排序方式</CENTER></td>
<td> </td>
<td><CENTER>已选择排序方式</CENTER></td>
</tr>
<tr>
<td width="40%">
<select multiple name="left" id="left" size="8" style='width:200;'
οndblclick="moveOption(document.getElementById('left'), document.getElementById('right'))">
<option value="20">测试数据一</option>
<option value="30">测试数据二</option>
<option value="40">测试数据三</option>
<option value="50">测试数据四</option>
<option value="60">测试数据五</option>
<option value="70">测试数据六</option>
<option value="80">测试数据七</option>
<option value="90">测试数据八</option>
</select>
</td>
<td width="20%" align="center">
<input type="button" value=" >> " οnclick="moveOption(document.getElementById('left'),document.getElementById('right'))"><br><br>
<input type="button" value=" << " οnclick="moveOption(document.getElementById('right'), document.getElementById('left'))">
</td>
<td width="40%">
<select multiple name="right" id="right" size="8" style='width:200;'
οndblclick="moveOption(document.getElementById('right'), document.getElementById('left'))">
</select>
</td>
</tr>
<tr>
<td colspan="3">
<CENTER>
<INPUT TYPE="button" value="置顶" οnclick="moveTop(document.getElementById('right'));">
<INPUT TYPE="button" value="上移" οnclick="moveUp(document.getElementById('right'));">
<INPUT TYPE="button" value="下移" οnclick="moveDown(document.getElementById('right'));">
<INPUT TYPE="button" value="置底" οnclick="moveBottom(document.getElementById('right'));">
</CENTER></td>
</tr>
</table>


</BODY>
</HTML>


<SCRIPT LANGUAGE="JavaScript">
<!--
//上移
　 function moveUp(obj)
　　{　
　　　　　　for(var i=1; i < obj.length; i++)
　　　　　　{//最上面的一个不需要移动，所以直接从i=1开始
　　　　　　　　if(obj.options[i].selected)
　　　　　　　　{
　　　　　　　　　　if(!obj.options.item(i-1).selected)
　　　　　　　　　　{
　　　　　　　　　　　　var selText = obj.options[i].text;
　　　　　　　　　　　　var selValue = obj.options[i].value;
obj.options[i].text = obj.options[i-1].text;
obj.options[i].value = obj.options[i-1].value;
obj.options[i].selected = false;
obj.options[i-1].text = selText;
obj.options[i-1].value = selValue;
obj.options[i-1].selected=true;
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}
　　　　}

//下移
function moveDown(obj)
　　　　{
　　　　　　for(var i = obj.length -2 ; i >= 0; i--)
　　　　　　{//向下移动，最后一个不需要处理，所以直接从倒数第二个开始
　　　　　　　　if(obj.options[i].selected)
　　　　　　　　{
　　　　　　　　　　if(!obj.options[i+1].selected)
　　　　　　　　　　{
　　　　　　　　　　　　var selText = obj.options[i].text;
　　　　　　　　　　　　var selValue = obj.options[i].value;
obj.options[i].text = obj.options[i+1].text;
obj.options[i].value = obj.options[i+1].value;
obj.options[i].selected = false;
obj.options[i+1].text = selText;
obj.options[i+1].value = selValue;
obj.options[i+1].selected=true;
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}
　　　　}
//移动
function moveOption(obj1, obj2)
{
for(var i = obj1.options.length - 1 ; i >= 0 ; i--)
{
if(obj1.options[i].selected)
{
var opt = new Option(obj1.options[i].text,obj1.options[i].value);
opt.selected = true;
obj2.options.add(opt);
obj1.remove(i);
}
}
}
//置顶
function moveTop(obj)
{
var opts = [];
for(var i =obj.options.length -1 ; i >= 0; i--)
{
if(obj.options[i].selected)
{
opts.push(obj.options[i]);
obj.remove(i);
}
}
var index = 0 ;
for(var t = opts.length-1 ; t>=0 ; t--)
{
var opt = new Option(opts[t].text,opts[t].value);
opt.selected = true;
obj.options.add(opt, index++);
}
}
//置底
function moveBottom(obj)
{
var opts = [];
for(var i =obj.options.length -1 ; i >= 0; i--)
{
if(obj.options[i].selected)
{
opts.push(obj.options[i]);
obj.remove(i);
}
}
for(var t = opts.length-1 ; t>=0 ; t--)
{
var opt = new Option(opts[t].text,opts[t].value);
opt.selected = true;
obj.options.add(opt);
}
}

//-->
</SCRIPT>
iteye_9849
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
select标签multiple属性的使用方法
易天海
11-21 1万+
https://blog.csdn.net/gaohuanjie/article/details/37652171  一、实现效果：         一、实现代码1： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran...
Jquery实现select multiple左右添加和删除功能的简单实例
10-22
以下是添加和删除功能的核心代码： ```javascript // 向右移动 $(function() { $("#add").click(function() { if ($("#fb_list option:selected").length > 0) { $("#fb_list option:selected").each(function()...
Jquery实现select multiple左右添加和删除功能
学而不思
07-12 4263
项目要实现这样的一个功能(如下图所示):选择左边下拉列表框中的选项,点击添加按钮,把选择的选项移动到右边的下拉列表框中,同样的选择右边的选项,点击删除按钮,即把选择的选项移动到左边的下拉列表框中.相信用js很多朋友都写过,下面是我用jQuery来实现这样的功能的.具体代码如下:                      选择
实现select multiple左右添加和删除功能
fyqcdbdx的专栏
11-30 2086
项目要实现这样的一个功能(如下图所示):选择左边下拉列表框中的选项,点击添加按钮,把选择的选项移动到右边的下拉列表框中,同样的选择右边的选项,点击删除按钮,即把选择的选项移动到左边的下拉列表框中.相信用js很多朋友都写过,下面是我用jQuery来实现这样的功能的.具体代码如下: [img] [/img] 下拉列表      选择分包
element el-select multiple 回显时 删除 添加无效问题
u012174809的专栏
12-07 1313
这个问题，我没百度时，浪费了几十分钟，百度后，30秒搞定，有问题没头绪还是先百度呀。 <el-select v-model="ruleForm.tagList" :multiple="true" :clearable="true" style="width:100%" @change="$forceUpdate()"
js 两个 multiple select 添加 删除 option
Truong的专栏
12-19 2144
function addObj(){     for(var i=0;i      if(document.frm.chooseObj.options[i].selected){//如有选中的，先添加已选，再删除可选       document.frm.selectObj.add(new Option(document.frm.chooseObj.options[i].text
用jQuery实现multiple select(列表框)左右添加和删除功能
旺仔专栏
05-05 6980
  实现multiple select(列表框)左右添加和删除功能 select{ text-align:center; width:300px; height:150px; } -->
select 多选 左右框添加删除
炉火纯青
04-20 3896
js select    /*移除左边选中的列表项到右边*/  function fMoveSelectedOptionsLeftToRight(oLeft,oRight)  {  if(!(oLeft&&oRight))  {  return;  }  if(!hasOptions(oLeft))  {  return;  }  if(oLeft.selectedInd
<select> 标签的 multiple 属性规定可同时选择多个选项。
热门推荐
gtlishujie的博客
08-19 1万+
1.使用multiple属性可以实现多选 multiple="multiple" size="2"> Volvo Saab Opel Audi 2.     pageEncoding="GBK"%>                                报表定制          .tabstyle table tr td {     b
select多选下拉框 移动端_vue的select下拉框多选项-multiple属性
weixin_39564605的博客
12-20 1886
最近在使用vue-element-admin这个后台管理框架开源模板在做一个管理后台，使用起来其实还挺方便的，大部分的组件源码里面都已经写好了，用的时候只需要把源码拿出来修改修改，也就成了。这里记录一下开发过程中遇到的一些功能。资料相关vue-element-admin今天记录一个select下拉框单选或者多选项，支持删除的功能其实很简单的，需要添加一个属性为el-select设置multiple...
select选择框内容左右移动添加删除栏目JS代码
qq_42094072的博客
07-17 1653
我也不是很会讲！看下效果！！！ 然后就直接copy代码吧！ &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/199...
重构《实现select multiple左右添加和删除功能》
03-16
在这个特定的案例中，“重构《实现select multiple左右添加和删除功能》”是一个关于如何优化多选下拉框（select multiple）操作的实践。该博文的作者通过提供一个名为`multipleSelect.html`的示例文件，展示了如何...
两个多选select(multiple左右)添加、删除选项和取值实例
09-04
它利用了`select`元素的`multiple`属性、`input`元素的`hidden`类型，以及jQuery的事件监听和DOM操作功能，提供了一个直观且实用的用户界面交互。这对于任何需要在网页上处理多选列表的开发者来说，都是一个值得参考...
chromedriver-mac-arm64_126.0.6474.0.zip
07-31
chromedriver-mac-arm64_126.0.6474.0.zip
chromedriver-mac-arm64_128.0.6548.0.zip
07-31
chromedriver-mac-arm64_128.0.6548.0.zip
MySQL查询加速器：利用Query Cache提升效率
07-31
MySQL是一个流行的开源关系型数据库管理系统（RDBMS），广泛用于Web应用程序的后端数据存储。它基于结构化查询语言（SQL）来管理数据，并且是LAMP（Linux, Apache, MySQL, PHP/Python/Perl）技术栈的一部分，这个技术栈常用于构建动态网站和Web应用程序。 MySQL的特点包括： - **开放源代码**：MySQL的源代码是公开的，任何人都可以自由使用和修改。 - **跨平台**：MySQL可以在多种操作系统上运行，包括Linux、Windows、macOS等。 - **高性能**：MySQL以其快速的查询处理和良好的性能而闻名。 - **可靠性**：MySQL提供了多种机制来确保数据的完整性和可靠性，包括事务支持、备份和恢复功能。 - **易于使用**：MySQL提供了简单直观的界面和丰富的文档，便于用户学习和使用。 - **可扩展性**：MySQL支持从小型应用到大型企业级应用的扩展。 - **社区支持**：由于其广泛的使用，MySQL拥有一个活跃的开发者社区，提供大量的资源和支持。 MySQL被广泛应用于各种场景，包括在线事务处理（OL
Objective-C语言的基础教程.md
最新发布
07-31
Objective-C是一种面向对象的编程语言，是C语言的扩展。它主要用于苹果的iOS和macOS应用程序开发。
暂存暂存暂存暂存暂存暂存暂存暂存
07-31
暂存暂存暂存暂存暂存暂存暂存暂存
Java实现HTTP断点续传的多线程安全解决方法.zip
07-31
Java实现HTTP断点续传的多线程安全解决方法
elementui中当el-select下拉框绑定multiple多选后无法编辑删除
07-15
实际上，多选的下拉框不提供编辑和删除功能是因为这样的设计逻辑。多选下拉框最多允许用户选择多个选项，而不支持编辑和删除已选中的选项。通过点击下拉框展开选项，用户可以选择自己所需的多个选项，但是不能对已...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值