如何实现下面这样的效果？ - JavaScript论坛

楼主

问题点数：0 回复次数：5

如何实现下面这样的效果？

图片附件: 游客没有浏览图片的权限，请登录或注册

搜索更多相关主题的帖子: 效果　

第 2 楼

得分:0


<script language=\"JavaScript\">
function copyToList(from,to) //from表示:包含可选择项目的select对象名字 to表示:列出可选择项目的select对象名字 //你可以根据你的具体情况修改
{
  fromList = eval('document.forms[0].' + from);
  toList = eval('document.forms[0].' + to);
  if (toList.options.length > 0 && toList.options[0].value == 'temp')
  {
    toList.options.length = 0;
  }
  var sel = false;
  for (i=0;i<fromList.options.length;i++)
  {
    var current = fromList.options[i];
    if (current.selected)
    {
      sel = true;
      if (current.value == 'temp')
      {
        alert ('你不能选择这个项目!');
        return;
      }
      txt = current.text;
      val = current.value;
      toList.options[toList.length] = new Option(txt,val);
      fromList.options[i] = null;
      i--;
    }
  }
  if (!sel) alert ('你还没有选择任何项目');
}
function allSelect() //这是当用户按下提交按钮时，对列出选择的select对象执行全选工作，让递交至的后台程序能取得相关数据
{
  List = document.forms[0].chosen;
  if (List.length && List.options[0].value == 'temp') return;
  for (i=0;i<List.length;i++)
  {
     List.options.selected = true;
  }
}
</script>
<table border=\"0\">
<form onSubmit=\"allSelect()\">
  <tr>
    <td>
      <select name=\"possible\" size=\"4\" MULTIPLE width=200 style=\"width: 200px\">
        <option value=\"1\">中国广州</option>
        <option value=\"2\">中国上海</option>
        <option value=\"3\">中国北京</option>
        <option value=\"4\">中国武汉</option>
      </select>
     </td>
     <td><a href=\"javascript:copyToList('possible','chosen')\">添加至右方--></a><br><br><a href=\"javascript:copyToList('chosen','possible')\"><--添加至左方</a></td>
     <td>
       <select name=\"chosen\" size=\"4\" MULTIPLE width=200 style=\"width: 200px;\">
         <option value=\"temp\">从左边选择你的地区</option>
       </select>
     </td>
   </tr>
 </form>
</table>

第 3 楼

得分:0

谢谢 “lmhllr”

第 4 楼

得分:0

和tianlebest的一样，我用的是创建节点的方法，可怎么也获取不到sel1中option的文本内容，请朋友们帮忙解答，谢谢
<table width="340">
<tr>
<td align="center" width="120">
<select size="12" style="width:120px" id="sel1">
<option value="品种1">品种1</option>
<option>品种2</option>
<option>品种3</option>
<option>品种4</option>
<option>品种5</option>
<option>品种6</option>
<option>品种7</option>
<option>品种8</option>
<option>品种9</option>
<option>品种10</option>
<option>品种11</option>
<option>品种12</option>
<option>品种13</option>
<option>品种14</option>
<option>品种15</option>
<option>品种16</option>
<option>品种17</option>
<option>品种18</option>
<option>品种19</option>
<option>品种20</option>
</select>

</td>
<td align="center" width="100" valign="middle">
<input type="button" id="but1" value=">>" style="width:50px;" onclick="add('sel2',str)"><br/><br/>
<input type="button" id="but2" value="<<" style="width:50px;">
</td>
<td align="center" width="120">
<select size="12" style="width:120px" id="sel2">

</select>
</td>
</tr>
</table>
<script language="javascript">
var x=document.getElementById("sel1");
var str=x.selectedIndex.value;

function createnew(str)
{
var newElement=document.createElement("option");
var newText=document.createTextNode(str);
newElement.appendChild(newText);
return newElement;
}
function add(nodeId,str)
{
var node=document.getElementById(nodeId);
var newNode=createnew(str);
node.appendChild(newNode);
}
</script>

習慣瞇醉,禧歡跟上帝窷兲,像变澀龙般虚伪,如气候那样善变.人脸背后流淌着恶魔的血,一路向前,猦猦癫癫.

第 5 楼

得分:0

[CODE]<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<title> 下拉列表框多选的效果</title>
<meta http-equiv="content-type" content="text/html;" />
<meta name="generator" content="editplus" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link type="text/css" rel="stylesheet" href="" />
</head>
<script type="text/javascript">

</script>
<body>
<table id="MovOpTB" cellspacing="0" cellpadding="0">
<tr>
<td class="slt"><strong class="norTit">我的联系人</strong><br /><select id="SltAddrA" class="SltBar" name="" size="12" multiple="true">
<option value="1">CNLei01 <test@test.com></option>
<option value="2">CNLei02 <test@test.com></option>
<option value="5">CNLei05 <test@test.com></option>
<option value="7">CNLei07 <test@test.com></option>
<option value="9">CNLei09 <test@test.com></option>
<option value="9">CNLei10 <test@test.com></option>
<option value="11">CNLei11 <test@test.com></option>
</select>
</td>
<td class="btn"><input type="button" class="BtnA2w" name="" value=">>>" onclick="Mv('SltAddrA','SltAddrB');" /><br /><br /><input type="button" class="BtnB2w" name="" value="<<<" onclick="Mv('SltAddrB','SltAddrA');" /></td>
<td class="slt"><strong class="norTit">列表成员</strong><br /><select id="SltAddrB" class="SltBar" name="" size="12" multiple="true">
<option value="">CNLei03 <test@test.com></option>
<option value="">CNLei04 <test@test.com></option>
<option value="">CNLei08 <test@test.com></option>
</select></td>
</tr>
</table>
</body>
</html>[/CODE]

其实我就是改变社会风气，提高少女素质，刺激电影市道，提高年轻人内涵，玉树临风，风度翩翩的整蛊专家，我名叫古晶，英文名叫JingKoo！

第 6 楼

得分:0

我本来是想创建新的对应左边选中的option到右边的select中的，就是读不到左边被选中的option内的文本，可能这种方法行不通吧．．．还是用版主的方法来实现，谢谢zhulei1978的回答和楼主的提问．．

習慣瞇醉,禧歡跟上帝窷兲,像变澀龙般虚伪,如气候那样善变.人脸背后流淌着恶魔的血,一路向前,猦猦癫癫.