winhonourxzg
- 浏览: 38495 次
- 性别:
- 来自: 深圳
-
文章分类
最新评论
下拉列表
<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;'
ondblclick="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=" >> " onclick="moveOption(document.getElementById('left'),document.getElementById('right'))"><br><br>
<input type="button" value=" << " onclick="moveOption(document.getElementById('right'), document.getElementById('left'))">
</td>
<td width="40%">
<select multiple name="right" id="right" size="8" style='width:200;'
ondblclick="moveOption(document.getElementById('right'), document.getElementById('left'))">
</select>
</td>
</tr>
<tr>
<td colspan="3">
<CENTER>
<INPUT TYPE="button" value="置顶" onclick="moveTop(document.getElementById('right'));">
<INPUT TYPE="button" value="上移" onclick="moveUp(document.getElementById('right'));">
<INPUT TYPE="button" value="下移" onclick="moveDown(document.getElementById('right'));">
<INPUT TYPE="button" value="置底" onclick="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>
<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;'
ondblclick="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=" >> " onclick="moveOption(document.getElementById('left'),document.getElementById('right'))"><br><br>
<input type="button" value=" << " onclick="moveOption(document.getElementById('right'), document.getElementById('left'))">
</td>
<td width="40%">
<select multiple name="right" id="right" size="8" style='width:200;'
ondblclick="moveOption(document.getElementById('right'), document.getElementById('left'))">
</select>
</td>
</tr>
<tr>
<td colspan="3">
<CENTER>
<INPUT TYPE="button" value="置顶" onclick="moveTop(document.getElementById('right'));">
<INPUT TYPE="button" value="上移" onclick="moveUp(document.getElementById('right'));">
<INPUT TYPE="button" value="下移" onclick="moveDown(document.getElementById('right'));">
<INPUT TYPE="button" value="置底" onclick="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>
分享到：
发表评论
-
js 对象
2010-12-17 15:06 820function Person(name) { ... -
jquery
2009-10-26 11:50 796<div class=”contentToChange” ... -
右键屏蔽
2009-05-06 18:16 8551. oncontextmenu="window.e ... -
dwr 参数
2009-03-27 13:39 1680DWR是方便使用AJAX连接JS和JAVA的的一个框架,把服务 ... -
js中cookie的操作函数
2009-02-27 23:03 753<script type="text/java ...
相关推荐
NULL 博文链接：https://congdepeng.iteye.com/blog/421642
下面小编就为大家带来一篇Jquery实现select multiple左右添加和删除功能的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
主要介绍了两个多选select(multiple左右)添加、删除选项和取值实例,使用jquery实现,需要的朋友可以参考下
React Multiple Select Gallery（Hook:hook:） 多张选择的照片（或其他任何照片）会对带有打字稿的钩子示例产生React。 跑 安装依赖项并： > yarn start 用法 const { addItem , getSize , getItems } = ...
呃。其实很简单的东西啦。页面的图 两个列表都可以多选， ...select id=”select1″ size=”5″ multiple style=”width:100px ” > ”111″>北京</option> ”222″>上海</option> <option value=”3
本文实例讲述了select选择框内容左右移动添加删除。分享给大家供大家参考。具体如下： select选择框内容左右移动，简单实用，选中选项内容，点击移动按钮可进行内容左右移动，运行效果图： 具体代码如下 <!...
本文实例讲述了jquery操作select常见方法。分享给大家供大家参考，具体如下： 在前段HTML页面设计中select 下拉框，或者 ...6. 两个select 框之间互相添加删除，从左边到右边，从右边到左边的操作，通常是多选情况。 7
jQuery UI Multiselect是一个Web UI控件,它将html multiple select inputs转换成一个更直关、更易于操作的多选控件。支持全选添加和删除操作。
就是实现这个效果的，选中添加到右边，全部添加到右边，选中删除到左边，全部删除到左边。 html部分： 代码如下:<body> ”centent”> <select multiple=”multiple” id=”select1″ style=”width:100px...
ArcGIS 是一款功能强大的 GIS 软件，提供了多种工具和功能来处理和分析空间数据。本文档提供了 ArcGIS 工具的中英对照总结讲解，涵盖了 Analysis Tool、Cartography Tool 和 Conversion Tool 等多个方面。 Analysis...
' 备注：1.0.0 RC3新添加加载内部样式功能 fullscreen：默认全屏显示 参数值：true(全屏大小),false(标准大小) sourceMode：默认源代码模式 参数值：true(源代码模式),false(编辑模式) forcePtag：强制P标签 ...
### html只需在类中添加shuttle_select并为您的选择设置multiple即可。 <input type="text" name="input" value="" hint="typing your name." /> <textarea rows="8" cols="40" name="textarea" hint=...
Sublime Text还支持一次选中多行的操作：Furthermore, Sublime Text brings lets us select multiple lines at once, which can significantly boost your productivity. There are several ways to perform this ...
jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都构建于这个函数之上，或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式（通常由 CSS 选择器组成），然后根据这个...
21.Flash中如果想要测试完整的互动功能和动画功能怎么办？ A. 选择 Control > Loop Playback B. 选择 Control > Enable Buttons C. 选择Control > Test Movie D. 选择 Control > Actions 22.Flash 菜单View→...
1、程序功能和使用环境介绍 2、程序操作方法介绍 3、登录信息文件RadminM.txt介绍 4、登录信息文件RadminM.txt的转换和编制 5、v3.0版新增解锁 远程桌面功能 6、相关配置和多种语言支持介绍 7、免责申明 1...
在分类过程中，最好分的比较细一点，虽然看起来库比较多，但是一则管理比较方便，维护、修改、添加等都十分容易，二则在调用元件时一目了然，作者就是这样管理和用运的，比在原来的库中用运方便的多。 六、 创建和...