select左移右移的实现

最新推荐文章于 2024-05-24 11:22:00 发布
最新推荐文章于 2024-05-24 11:22:00 发布
阅读量1.9k 收藏
点赞数
分类专栏： JQuery 文章标签： select JQuery
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左移右移的实现/title>
<script language="JavaScript" src="../js/jquery-1.4.2.js">
        </script>
<style type="text/css">
<!--
BODY
{
font-family:"Courier";
font-size: 12px;
margin:0px 0px 0px 0px;
overflow-x:no;
overflow-y:no;
background-color: #B8D3F4;
}
td
{
font-size:12px;
}
.default_input
{
border:1px solid #666666;
height:18px;
font-size:12px;
}
.default_input2
{
border:1px solid #666666;
height:18px;
font-size:12px;
}
.nowrite_input
{
border:1px solid #849EB5;
height:18px;
font-size:12px;
background-color:#EBEAE7;
color: #9E9A9E;
}
.default_list
{
font-size:12px;
  border:1px solid #849EB5;
}
.default_textarea
{
font-size:12px;
border:1px solid #849EB5;
}
.nowrite_textarea
{
border:1px solid #849EB5;
font-size:12px;
background-color:#EBEAE7;
color: #9E9A9E;
}
.wordtd5 {
font-size: 12px;
text-align: center;
vertical-align:top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #b8c4f4;
}
.wordtd {
font-size: 12px;
text-align: left;
vertical-align:top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #b8c4f4;
}
.wordtd_1 {
font-size: 12px;
vertical-align:top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #516CD6;
color:#fff;
}
.wordtd_2{
font-size: 12px;
text-align: right;
vertical-align:top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #64BDF9;
}
.wordtd_3{
font-size: 12px;
text-align: right;
vertical-align:top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #F1DD34;
}
.inputtd
{
font-size:12px;
vertical-align:top;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}
.inputtd2
{
text-align: center;
font-size:12px;
vertical-align:top;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}
.tablebg
{
font-size:12px;
}
.tb{
border-collapse: collapse;
border: 1px outset #999999;
background-color: #FFFFFF;
}
.td2{line-height:22px; text-align:center; background-color:#F6F6F6;}
.td3{background-color:#B8D3F4; text-align:center; line-height:20px;}
.td4{background-color:#F6F6F6;line-height:20px;}
.td5{border:#000000 solid;
       border-right-width:0px;
   border-left-width:0px;
   border-top-width:0px;
   border-bottom-width:1px;}
.tb td{
font-size: 12px;
border: 2px groove #ffffff;
}
.noborder {
border: none;
}
.button {
border: 1px ridge #ffffff;
line-height:18px;
height: 20px;
width: 45px;
padding-top: 0px;
background:#CBDAF7;
color:#000000;
font-size: 9pt;
    font-family:"Courier";
} 
.textarea {
font-family: Arial, Helvetica, sans-serif, "??";
font-size: 9pt;
color: #000000;
border-bottom-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #000000;
background-color:transparent;
text-align: left
}
-->
</style>
</head>
<script type="text/javascript">
  $().ready(function(){
//添加一个
$("#add").click(function(){

$("#second").append($("#first option:selected"));

  //$("#second").append($("#first :selected"));

//$("#first :selected").appendTo("#second");

});

//添加全部
$("#add_all").click(function(){
$("#second").append($("option"));
});

//删除一个

$("#remove").click(function(){
$("#first").append($("#second option:selected"));
});

//删除全部

$("#remove_all").click(function(){
$("#first").append($("#second option"));
});

});
</script>
<body>
<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;">
<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
  <tr>
    <td width="126">
    <!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度-->
<select name="first" size="10" multiple="multiple" class="td3" id="first">
  <option value="选项1">选项1</option>
  <option value="选项2">选项2</option>
  <option value="选项3">选项3</option>
  <option value="选项4">选项4</option>
  <option value="选项5">选项5</option>
  <option value="选项6">选项6</option>
  <option value="选项7">选项7</option>
  <option value="选项8">选项8</option>
</select>    
</td>
    <td width="69" valign="middle">
       <input name="add"  id="add" type="button" class="button" value="-->" /> 
       <input name="add_all" id="add_all"  type="button" class="button" value="==>" /> 
       <input name="remove"  id="remove" type="button" class="button" value="&lt;--" />
   <input name="remove_all"  id="remove_all" type="button" class="button" value="&lt;==" />
        </td>
    <td width="127" align="left">
  <select name="second" size="10" multiple="multiple" class="td3" id="second">
         <option value="选项9">选项9</option>
      </select>
</td>
  </tr>
</table>
</div>
</body>
</html>
xingyuner2
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现两个select下拉框选项左移右移
10-20
主要介绍了JavaScript实现两个select下拉框选项左移右移功能，js实现下拉框元素互相移动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jquery 实现的 select 上移、下移、左移、右移功能
11-19
jquery 实现的 select 上移、下移、左移、右移功能 下载下来直接预览效果
CSS调整两个SELECT间的间距
Hsing Hsu's Blog
07-26 7592
select{margin:5px   0;}
JavaScript Select和Option列表元素上下左右移动
my_dif的专栏
07-27 125
New Document var currentSel = null; function move(){ if(arguments.length==1){ moveUp(arguments[0]); }else if(arguments.length==2){ moveRight(arguments[0],arguments[1]); ...
如何调整select及其option之间的间距。
最新发布
emmmaha的博客
05-24 282
元素和选项之间的间距大小符合您的设计需求。请注意，由于浏览器的样式差异，可能需要在不同浏览器中进行调整以获得更一致的效果。元素和其选项的样式受浏览器的默认样式影响较大，因此需要一些技巧来调整它们之间的间距。元素和其每个选项展示的内容之间的间距，您可以使用CSS来定义样式。以下是一个基本示例，演示如何通过调整。在上面的示例中，我们使用CSS为。元素和选项之间的间距。元素与周围元素之间的外边距。属性来增加内边距，从而减小。
JQuery实现下拉框Select选项的左右移动
pan_junbiao的博客
10-24 1263
某网站的一个后台界面，在“负责频道”这个区域，用户可以通过按钮将左边选中的选项添加到右边，也可以将右边的选项添加到左边，或者双击选项，将其添加给对方。执行结果如下图： （1）页面代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>负责频道</title> <meta name="author" cont
jquery实现select多选框的左右移动
weixin_71792169的博客
11-13 488
公开招标小型机采购00"+i+"选择分包
jQuery实现下拉框左右移动（全部移动，已选移动）
01-19
用到的方法为：appendTo() 格式：$(content).appendTo...看一下具体实现的代码： <html xmlns=http://www.w3.org/1999/xhtml> <head> <title></title> [removed][removed] <script type
JavaScript实现左右下拉框动态增删示例
01-19
选中下拉框中的选项实现左移右移 效果： 1. Html部分代码 <body> <td><select size=15 id=left > 左1 左2 左3 左4 左5 左6 左7 <
一句话调用动态生成标签个数的标签栏，并可以设置 标签居左或是居中或是居右显示，支持单选或者多选
wsqfly博客
11-25 1641
// //  WSQAdaptiveLable.h //  Test // //  Created by Crazy Wang on 2018/11/12. //  Copyright © 2018年 Crazy Wang. All rights reserved. //   #import &lt;UIKit/UIKit.h&gt;   //按钮整体 居左 居中 居右 的样式...
如何让select下拉图标显示在左边
weixin_45725033的博客
10-22 1887
select 元素是一种表单控件可以在select中列出多选项供选择，在前端用到比较多，但是通常的下拉图标都是在右侧，如果遇到特殊要求怎么来把图标显示左侧呢？ 其实思路很简单，下拉图标在左边是他的默认样式，所以我们需要先清除他的默认样式（appearance:none;），这样就没有下拉图标了，这时我们在再左边加上下拉图标或截图就实现效果了，虽然有些笨，但还是简单易操作的，如果有其他方法欢迎告知，...
基于Element UI的Select控件实现多选框中单行显示&左右移动
Challenge Next Challenge
09-07 3277
控件主要功能，可以单行显示多选的tag，并且可以利用左右键移动tag在组件中的位置 直接上代码： <el-select v-model="tags" ref="tagsSelect" multiple filterable remote clearable popper-class="tag-input-options" :remote-...
【elementUI】el-select选择框位置错位、偏移bug
小安驾到的博客
02-16 5527
在el-select组件中，可能会由于option选项过多而导致下拉框位置错乱、偏移的情况，我个人试验大概是在5-6个option以上时，该bug就会出现。
select选框文本对齐方式,文字居中 居右 居左
徊忆羽菲
11-10 1985
select选框文本对齐方式,文字居中 居右 居左
一个td里怎样才能一部分内容靠左,一部分内容靠右
alwayscode
10-23 6183
搜问题看到的，学习下 [list=1] [*]http://bbs.51js.com/viewthread.php?tid=76560 [/list] [code="java"] 账户12345678 [/code]
Element-UI中Select选择器讲解（el-select详解）
热门推荐
辰兮要努力
11-22 9万+
本篇整理了el-select相关组件的基础用法，也正是这个组件，让我更加喜欢vue，更加喜欢element-ui，欢迎阅读学习，分享获取新知，大家一起进步。
el-form的label和表单自适应填满一行且靠左对齐
weixin_44707050的博客
01-19 4551
如图：label和content均向左靠齐，且填满整行； .el-form-item__label-wrap { margin-left: 0px !important; } .el-form-item__label{ word-break: keep-all !important; } .el-form-item__content{ margin: 0 !important; width: -webkit-fill-available; } .el-input.el..
vue的el-table表格，希望列表头文字居中，却希望该列中的单元格中的文字靠左对齐
little_kid_pea的博客
09-20 4万+
列表头文字居中 设置el-table-column元素的align='center'， 该列中的单元格中的文字靠左对齐，则使用span 绑定v-html文字，并设置span的css样式为text-align:left;不管用，得用div，text-align:left;才管用 span 是内联元素，text-align:left;是不管用的 div是块级元素，text-align:l...
fpga输入实现左移右移
04-23
FPGA输入实现左移右移需要通过移位寄存器实现。对于左移，输入数据按照左移的位数进行移位，不足的部分用0补齐；对于右移，输入数据按照右移的位数进行移位，溢出的部分舍去。在FPGA中，移位操作可以由硬件电路实现...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值