query 实现listbox左右互转，取值

界面上的左右俩个listbox

 <td width="100%" style="text-align: left; padding-left: 10px;">
      <table>
       <tr>
        <td>
         板块列表
         <br>
         <select size="4" name="listLeft" id="listLeft" class="normal"
          title="双击可实现右移">
         </select>
        </td>
        <td>
         <div style="width: 40px; float: left; padding-top: 10px;">
          <input type="button" id="btnRight"
           value="&nbsp;&nbsp;&nbsp;>&nbsp;&nbsp;&nbsp;" />
          <br>
          <input type="button" id="btnRightAll"
           value="&nbsp;&nbsp;>>&nbsp;&nbsp;" />
          <br>
          <input type="button" id="btnLeft"
           value="&nbsp;&nbsp;&nbsp;<&nbsp;&nbsp;&nbsp;" />
          <br>
          <input type="button" id="btnLeftAll"
           value="&nbsp;&nbsp;<<&nbsp;&nbsp;" />
         </div>
        </td>
        <td>
         关联板块
         <br>
         <select size="4" name="listRight" id="listRight" class="normal"
          title="双击可实现左移">
         </select>
        </td>
       </tr>
      </table>
     </td>

 

相关操作

<script type="text/javascript">

//初始化数据，可以从后台取得对应的数据

var initJson ="{ "datalist":
            [
                { "data": "jQuery", "text": "jQuery" },
                { "data": "Asp.net", "text": "Asp.net" },
                { "data": "internet", "text": "internet" },
                { "data": "Sql", "text": "Sql" }
            ]
  };"//bind data
var vlist = "";
//遍历json数据
jQuery.each(initJson.datalist, function(i, n) {
    vlist += "<option value=" + n.data + ">" + n.text + "</option>";
});
//绑定数据到listLeft
$("#listLeft").append(vlist);

 

////////对单条数据进行左右移动

//right move
$("#btnRight").click(function() {
   moveright(false);
});
//left move
$("#btnLeft").click(function() {
     moveleft(false);
});

//right move all
$("#btnRightAll").click(function() {
   moveright(true);
});
//left move all
$("#btnLeftAll").click(function() {
     moveleft(true);
});

 //double click to move left 
 $("#listLeft").dblclick(function() { 
     moveright(false); 
 }); 
 //double click to move right 
 $("#listRight").dblclick(function() { 
     moveleft(false); 
 }); 
 
 
 
 /////////对所有的数据进行移动
 function moveright(all){
    //数据option选中的数据集合赋值给变量vSelect
    var vSelect ;
    if(all)
     vSelect = $("#listLeft option");
    else
     vSelect = $("#listLeft option:selected");
    //克隆数据添加到listRight中
    vSelect.clone().appendTo("#listRight");
    //同时移除listRight中的option
    vSelect.remove();
 }
 function moveleft(all){
  var vSelect ;
  if(all)
   vSelect = $("#listRight option");
  else
        vSelect = $("#listRight option:selected");
    vSelect.clone().appendTo("#listLeft");
    vSelect.remove();
 }
 
 /////获得选择的值
 function getValues(){
  var selOps = $("#listRight option");
  var  getValue = '';
  jQuery.each(selOps, function(i, n) {
  getValue += n.value +",";
 });
 $("#getRelSessions").val(getValue);
 }