一到笔试题 请问这个如何实现

Question

0.

Answer 1

上面发了个附件里面有具体的实现的图片
下面我文字说下要实现些什么
左边是一个select的下拉菜单的表 但是要全部现实不要下拉 而且还可以多选  然后中间有4个按钮可以实现把左边的东西以后到右边去  右边的东西也可以移动到左边来    有1个按钮是左边全部移动到右边  1个是左边选中的移动到右边   1个是右边的全部移动到左边  右边选中的移动到左边

Answer 2

晕
我写完了才看见你的要求
还可以多选   还要是select框  我日....
div模拟的容器 开始打算用iframe的 但是不会用这个东西.....
<style type="text/css">
.y1{width:120px; height:25px; cursor:pointer; padding:5px 0 0 5px}
.y2{width:120px; height:25px; cursor:pointer; padding:5px 0 0 5px;background-color:#FFFF66}
</style>
<div id="left" style="width:120px; height:150px; border:1px solid #000000; float:left;"><div class="y1" onclick="cc(this)">options1</div><div class="y1" onclick="cc(this)">options2</div><div class="y1" onclick="cc(this)">options3</div></div> 
<div style="width:120px; height:150px; border:1px solid #000000; float:left; padding:3px 0 0 50px"> 
<input type="button" name="Submit" value=" > " onclick="zhuan(1)" /><br><br><input type="button" name="Submit" value=" >>" onclick="zhuana(1)"/><br><br><input type="button" name="Submit" value=" < " onclick="zhuan(0)"/><br><br><input type="button" name="Submit" value=" <<" onclick="zhuana(0)"/>
</div>
<div id="right" style="width:120px; height:150px; border:1px solid #000000; float:left;">
  <div class="y1" onclick="cc(this)">options4</div>
  <div class="y1" onclick="cc(this)">options5</div>
  <div class="y1" onclick="cc(this)">options6</div>
</div> 
<script>
var left = document.getElementById("left")
var right = document.getElementById("right")
var a=0
var b=""
var c=""function cc(e){
if(a==0)
{e.className="y2";a++;b=e}
else
{b.className="y1";b=e;e.className="y2"}
}function zhuan(a){
if(a)
 {
  for(var i=0;i<left.getElementsByTagName("div").length;i++)
     { if(left.getElementsByTagName("div")[i].className=="y2")
    {
 c = left.getElementsByTagName("div")[i].cloneNode(true)
 left.removeChild(left.getElementsByTagName("div")[i]);
 right.appendChild(c)
 c.className="y1";return
}
 }
 }
 else
 {
   for(var i=0;i<right.getElementsByTagName("div").length;i++)
     { if(right.getElementsByTagName("div")[i].className=="y2")
    {
 c = right.getElementsByTagName("div")[i].cloneNode(true)
 right.removeChild(right.getElementsByTagName("div")[i]);
 left.appendChild(c)
 c.className="y1";return
}
 }
 }
}function zhuana(e)
{
if(e)
  {
   if(left.getElementsByTagName("div").lenght!=0)
     {
    var suipian =document.createDocumentFragment()     //创建节点碎片
   for(var i=0;i<left.getElementsByTagName("div").length;i++)
     {
 left.getElementsByTagName("div")[i].className="y1"
  var zz=left.getElementsByTagName("div")[i].cloneNode(true)
   suipian.appendChild(zz)
     }
 right.appendChild(suipian)
 left.innerHTML=""
 return
 }
  }
  else
  {
     var suipian =document.createDocumentFragment()
  for(var i=0;i<right.getElementsByTagName("div").length;i++)
     {
 right.getElementsByTagName("div")[i].className="y1"
    var zz=right.getElementsByTagName("div")[i].cloneNode(true)
   suipian.appendChild(zz)
     //alert(i)
 }
 left.appendChild(suipian)
 right.innerHTML=""
  }
}
</script>

Answer 3

select本身就不一定是下拉框；你把高度和宽度自定义一下就实现了列表选择，然后查一下手册，写个JS，不是很难啊