javascript下拉列表
我要把选中的项按照按钮上写明的，从一边移到另一边，左右移动，html如下，javascript代码没想出来，高手指导下——————<html><head><stylety...
我要把选中的项按照按钮上写明的，从一边移到另一边，左右移动，html如
下，javascript代码没想出来，高手指导下——————
<html>
<head>
<style type="text/css">
#div1 {
position: absolute;
top: 30px;
left: 200px;
background-color: Silver;
width:50px;
height: 160px;
border:1px solid ;
}
#div2 {
position: absolute;
top: 34px;
left: 300px;
background-color: Silver;
width:80px;
height: 147px;
border:1px solid ;
}
#div3 {
position: absolute;
top: 30px;
left: 450px;
background-color: Silver;
width:50px;
height: 160px;
border:1px solid ;
}
</style>
</head>
<body>
<div id="div1">
<select id="select1" multiple="multiple" size="10">
<option>张飞</option>
<option>赵云</option>
<option>马超</option>
<option>关羽</option>
<option>黄忠</option>
</select>
</div>
<div id="div2">
<p><input type="button" value="右移选中条数" id="btn1">
<p><input type="button" value="右 移 全 部 " id="btn2">
<p><input type="button" value="左移选中条数" id="btn3">
<p><input type="button" value="左 移 全 部" id="btn4">
</div>
<div id="div3">
<select id="select1" multiple="multiple" size="10">
</select>
</div>
</body>
</html>
就是将div1中下拉列表选中的值移到div3中，也就是div1与div3中的值来回移动 展开
下，javascript代码没想出来，高手指导下——————
<html>
<head>
<style type="text/css">
#div1 {
position: absolute;
top: 30px;
left: 200px;
background-color: Silver;
width:50px;
height: 160px;
border:1px solid ;
}
#div2 {
position: absolute;
top: 34px;
left: 300px;
background-color: Silver;
width:80px;
height: 147px;
border:1px solid ;
}
#div3 {
position: absolute;
top: 30px;
left: 450px;
background-color: Silver;
width:50px;
height: 160px;
border:1px solid ;
}
</style>
</head>
<body>
<div id="div1">
<select id="select1" multiple="multiple" size="10">
<option>张飞</option>
<option>赵云</option>
<option>马超</option>
<option>关羽</option>
<option>黄忠</option>
</select>
</div>
<div id="div2">
<p><input type="button" value="右移选中条数" id="btn1">
<p><input type="button" value="右 移 全 部 " id="btn2">
<p><input type="button" value="左移选中条数" id="btn3">
<p><input type="button" value="左 移 全 部" id="btn4">
</div>
<div id="div3">
<select id="select1" multiple="multiple" size="10">
</select>
</div>
</body>
</html>
就是将div1中下拉列表选中的值移到div3中，也就是div1与div3中的值来回移动 展开
3个回答
展开全部
我写了右移选中项和右移所有项的2个相应方法，和左移一个道理，方法如下：
(注意，把你第二个select的id改为select2!!!)
<script type="text/javascript">
function rightMove()
{
var select1 = document.getElementById("select1");
// 获取当前选中项的索引
var index = select1.selectedIndex;
// 获取当前选中项的文本
var name = select1.options[index].text;
// 删除select1的选中项
if(index >= 0){
select1.options.remove(index);
}
// 向select2中添加该项
var select2 = document.getElementById("select2");
select2.options.add(new Option(name,index));
}
function rightMoveAll()
{
var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
var length = select1.options.length;
for(var i=0;i<length;i++)
{
// 获取当前项的索引
var index = select1.options[0].value;
// 获取当前项的文本
var name = select1.options[0].text;
// 删除指定项
select1.options.remove(0);
// 向select2中添加项
select2.options.add(new Option(name,i));
}
}
</script>
(注意，把你第二个select的id改为select2!!!)
<script type="text/javascript">
function rightMove()
{
var select1 = document.getElementById("select1");
// 获取当前选中项的索引
var index = select1.selectedIndex;
// 获取当前选中项的文本
var name = select1.options[index].text;
// 删除select1的选中项
if(index >= 0){
select1.options.remove(index);
}
// 向select2中添加该项
var select2 = document.getElementById("select2");
select2.options.add(new Option(name,index));
}
function rightMoveAll()
{
var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
var length = select1.options.length;
for(var i=0;i<length;i++)
{
// 获取当前项的索引
var index = select1.options[0].value;
// 获取当前项的文本
var name = select1.options[0].text;
// 删除指定项
select1.options.remove(0);
// 向select2中添加项
select2.options.add(new Option(name,i));
}
}
</script>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
关注
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
经过测试，以下代码已经完全符合了你的要求：
<html>
<head>
<style type="text/css">
#div1 {
position: absolute;
top: 30px;
left: 200px;
background-color: Silver;
width:50px;
height: 160px;
border:1px solid ;
}
#div2 {
position: absolute;
top: 34px;
left: 300px;
background-color: Silver;
width:80px;
height: 147px;
border:1px solid ;
}
#div3 {
position: absolute;
top: 30px;
left: 450px;
background-color: Silver;
width:50px;
height: 160px;
border:1px solid ;
}
</style>
<script type="text/javascript">
function rightMove(){
var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
//从最后一个开始循环
for(i=select1.length-1;i>-1;i--){
if(select1.options[i].selected){
//向select2中添加select1中选定的项(可能是多项)
select2.options.add(new Option(select1.options[i].innerText,i));
//删除select1中选定的项(可能是多项)
select1.remove(i);
}
}
}
function rightMoveAll(){
var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
//从最后一个开始循环
for(i=select1.length-1;i>-1;i--){
//向select2中添加select1中所有项
select2.options.add(new Option(select1.options[i].innerText,i));
//删除select1中所有项
select1.remove(i);
}
}
function leftMove(){
var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
//从最后一个开始循环
for(i=select2.length-1;i>-1;i--){
if(select2.options[i].selected){
//向select1中添加select2中选定的项(可能是多项)
select1.options.add(new Option(select2.options[i].innerText,i));
//删除select2中选定的项(可能是多项)
select2.remove(i);
}
}
}
function leftMoveAll(){
var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
//从最后一个开始循环
for(i=select2.length-1;i>-1;i--){
//向select1中添加select2中所有项
select1.options.add(new Option(select2.options[i].innerText,i));
//删除select2中所有项
select2.remove(i);
}
}
</script>
</head>
<body>
<div id="div1">
<select id="select1" multiple="multiple" size="10">
<option>张飞</option>
<option>赵云</option>
<option>马超</option>
<option>关羽</option>
<option>黄忠</option>
</select>
</div>
<div id="div2">
<p><input type="button" value="右移选中条数" id="btn1" onclick="rightMove()"/>
<p><input type="button" value="右 移 全 部 " id="btn2" onclick="rightMoveAll()"/>
<p><input type="button" value="左移选中条数" id="btn3" onclick="leftMove()"/>
<p><input type="button" value="左 移 全 部" id="btn4" onclick="leftMoveAll()"/>
</div>
<div id="div3">
<select id="select2" multiple="multiple" size="10">
</select>
</div>
</body>
</html>
<html>
<head>
<style type="text/css">
#div1 {
position: absolute;
top: 30px;
left: 200px;
background-color: Silver;
width:50px;
height: 160px;
border:1px solid ;
}
#div2 {
position: absolute;
top: 34px;
left: 300px;
background-color: Silver;
width:80px;
height: 147px;
border:1px solid ;
}
#div3 {
position: absolute;
top: 30px;
left: 450px;
background-color: Silver;
width:50px;
height: 160px;
border:1px solid ;
}
</style>
<script type="text/javascript">
function rightMove(){
var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
//从最后一个开始循环
for(i=select1.length-1;i>-1;i--){
if(select1.options[i].selected){
//向select2中添加select1中选定的项(可能是多项)
select2.options.add(new Option(select1.options[i].innerText,i));
//删除select1中选定的项(可能是多项)
select1.remove(i);
}
}
}
function rightMoveAll(){
var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
//从最后一个开始循环
for(i=select1.length-1;i>-1;i--){
//向select2中添加select1中所有项
select2.options.add(new Option(select1.options[i].innerText,i));
//删除select1中所有项
select1.remove(i);
}
}
function leftMove(){
var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
//从最后一个开始循环
for(i=select2.length-1;i>-1;i--){
if(select2.options[i].selected){
//向select1中添加select2中选定的项(可能是多项)
select1.options.add(new Option(select2.options[i].innerText,i));
//删除select2中选定的项(可能是多项)
select2.remove(i);
}
}
}
function leftMoveAll(){
var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
//从最后一个开始循环
for(i=select2.length-1;i>-1;i--){
//向select1中添加select2中所有项
select1.options.add(new Option(select2.options[i].innerText,i));
//删除select2中所有项
select2.remove(i);
}
}
</script>
</head>
<body>
<div id="div1">
<select id="select1" multiple="multiple" size="10">
<option>张飞</option>
<option>赵云</option>
<option>马超</option>
<option>关羽</option>
<option>黄忠</option>
</select>
</div>
<div id="div2">
<p><input type="button" value="右移选中条数" id="btn1" onclick="rightMove()"/>
<p><input type="button" value="右 移 全 部 " id="btn2" onclick="rightMoveAll()"/>
<p><input type="button" value="左移选中条数" id="btn3" onclick="leftMove()"/>
<p><input type="button" value="左 移 全 部" id="btn4" onclick="leftMoveAll()"/>
</div>
<div id="div3">
<select id="select2" multiple="multiple" size="10">
</select>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
