这种选择器应该怎么做？

Question

 这种选择器应该怎么做？

Answer 1

<font color=red> <SCRIPT LANGUAGE="JavaScript">
    <!-- Begin
    sortitems = 1; // Automatically sort items within lists? (1 or 0)
    function move(fbox,tbox) {
      
        for(var i=0; i <fbox.options.length; i++) {
            if(fbox.options[i].selected && fbox.options[i].value != "") {
                if(fbox.options[i].innerText.indexOf('2') == 7){
                    alert("aaa带2不能传递");
                    return;
                }
                var no = new Option();
                no.value = fbox.options[i].value;
                no.text = fbox.options[i].text;
                tbox.options[tbox.options.length] = no;
                fbox.options[i].value = "";
                fbox.options[i].text = "";
            }
        }
        BumpUp(fbox);
        if (sortitems) SortD(tbox);
    }
    function moveall(fbox,tbox) {
        for(var i=0; i <fbox.options.length; i++) {
            if(fbox.options[i].innerText == 'item 1.2'){continue;}
            if(fbox.options[i].value != "") {
                var no = new Option();
                no.value = fbox.options[i].value;
                no.text = fbox.options[i].text;
                tbox.options[tbox.options.length] = no;
                fbox.options[i].value = "";
                fbox.options[i].text = "";
            }
        }
        BumpUp(fbox);
        if (sortitems) SortD(tbox);
    }
    function BumpUp(box)  {
        for(var i=0; i <box.options.length; i++) {
            if(box.options[i].value == "")  {
                for(var j=i; j <box.options.length-1; j++)  {
                    box.options[j].value = box.options[j+1].value;
                    box.options[j].text = box.options[j+1].text;
                }
                var ln = i;
                break;
            }
        }
        if(ln < box.options.length)  {
            box.options.length -= 1;
            BumpUp(box);
        }
    }
    function SortD(box)  {
        var temp_opts = new Array();
        var temp = new Object();
        for(var i=0; i <box.options.length; i++)  {
            temp_opts[i] = box.options[i];
        }
        for(var x=0; x <temp_opts.length-1; x++)  {
            for(var y=(x+1); y <temp_opts.length; y++)  {
                if(temp_opts[x].text > temp_opts[y].text)  {
                    temp = temp_opts[x].text;
                    temp_opts[x].text = temp_opts[y].text;
                    temp_opts[y].text = temp;
                    temp = temp_opts[x].value;
                    temp_opts[x].value = temp_opts[y].value;
                    temp_opts[y].value = temp;
                }
            }
        }
        for(var i=0; i <box.options.length; i++)  {
            box.options[i].value = temp_opts[i].value;
            box.options[i].text = temp_opts[i].text;
        }
    }    // End -->
    </script>
    <script language="javascript">
        var flg;
        function showandhide(name,sflg,fbox)
        {
            if(fbox.options.length == 0){return;}
            var target=document.getElementById("datetar");
            var str = '';
            var st = '';
            var boo = false;
            if(sflg == 1){
                for(var i=0; i <fbox.options.length; i++) {
                
                    if(fbox.options[i].selected && fbox.options[i].value != "") {
                        str += fbox.options[i].text + ' ';
                    }
                
                }
                boo = true;
            }else{
                for(var i=0; i <fbox.options.length; i++) {
                    
                        st += fbox.options[i].text + ' ';
                    
                }
                boo = false;
            }
            if(boo){target.value = str;}
            else{target.value = st;}
            var aa=document.getElementById(name);
            aa.style.display=(aa.style.display=='none')?'':'none'
            flg = sflg;
        }
        function go(){
             var target=document.getElementById("datetar");
            var list1 = document.getElementById("list1");
            var list2 = document.getElementById("list2");
            (flg=="1")?move(list2,list1):moveall(list2,list1);
            var aa=document.getElementById("bb");
            aa.style.display='none';
        }
        function reru(){
            var aa=document.getElementById("bb");
            aa.style.display='none';
        }
    </script>
    <form ACTION="" METHOD="POST">
        <table border="0">
            <tr>
                <td> <select multiple size="7" id="list1" name="list1" style="width:250px">
                        <option value="11"> item 1.1 </option>
                        <option value="12"> item 1.2 </option>
                        <option value="13"> item 1.3 </option>
                    </select> </td>
                <td>
                    <input type="button" value="    >>  " onclick="moveall(this.form.list1,this.form.list2)" name="B3">
                    <br/>
                    <input type="button" value="    >  " onclick="move(this.form.list1,this.form.list2)" name="B1">
                    <br/>
                    <input type="button" value="    <  " onclick="showandhide('bb','1',this.form.list2)" name="B2">
                    <br/>
                    <input type="button"  value="    < <  " onclick="showandhide('bb','0',this.form.list2)"  name="B4">
                <td> <select multiple size="7" id="list2" name="list2" style="width:250px">
                        <option value="21"> item 2.1 </option>
                        <option value="22"> item 2.2 </option>
                        <option value="23"> item 2.3 </option>
                    </select> </td>
            </tr>
        </table>
    </form>
    <form name="bb" style="display:none">
        数据：<input type="text" id="datetar" disabled="disabled" />
        <input type="button" value="可以通过"  onclick="go()">
        <input type="button" value="不可以通过"  onclick="reru()">
    </form> </font>

Answer 2

应该是两个框架或者DIV 吧

Answer 3

这是用select实现的，不过属性是multiple
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript">
<!--
function moveOption(e1,e2)
{
  try
  {
    for(var i=0;i<e1.options.length;i++)
    {
      if(e1.options[i].selected)
      {
        var e = e1.options[i];
        e2.options.add(new Option(e.text, e.value));
        e1.remove(i);
        i=i-1
      }
    }
    document.getElementById('city').value=getvalue(document.getElementById('list2'));
  }
  catch(e){}
}
function getvalue(geto)
{
  var allvalue = "";
  for(var i=0;i<geto.options.length;i++)
  {
    allvalue +=geto.options[i].value + ",";
  }
  return allvalue;
}
//-->
</script>
</head>
<body>
<form id="myform" name="myform" method="post">
  <table align="center" width="180" border="0">
    <tr>
      <td width="80" align="center">
        <select style="width:100%" multiple id="list1" name="list1" size="6" ondblclick="moveOption(this, document.getElementById('list2'))">
          <option value="北京">北京</option>
          <option value="上海">上海</option>
          <option value="重庆">重庆</option>
          <option value="天津">天津</option>
          <option value="陕西">陕西</option>
        </select>
      </td>
      <td width="20" align="center">
        <input type="button" value="添加>>" onclick="moveOption(document.getElementById('list1'), document.getElementById('list2'))"><br><br>
        <input type="button" value="<<删除" onclick="moveOption(document.getElementById('list2'), document.getElementById('list1'))">
      </td>
      <td width="80" align="center">
        <select style="width:100%" multiple id="list2" name="list2" size="6" ondblclick="moveOption(this, document.getElementById('list1'))">
        </select>
      </td>
    </tr>
  </table>
  <div align="center"><input type="text" id="city" name="city" size="23" /></div>
</form>
</body>
</html>

Answer 4

SELECT好一些！主要用JS来操作！