query 实现listbox左右互转，取值

最新推荐文章于 2025-07-14 12:56:16 发布

LEE-MCICI

最新推荐文章于 2025-07-14 12:56:16 发布

阅读量841

点赞数

分类专栏： jquery

jquery 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的界面元素，该元素包含两个列表框(listbox)及相应的按钮来控制数据项在两个列表间的单个或批量移动。通过双击或点击按钮，用户可以轻松地将数据项从一个列表移动到另一个列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

界面上的左右俩个listbox

相关操作

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

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

//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);
}