左侧数据移到右侧 select 实现法

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>无标题文档</title>
<script src="http://s1.56img.com/script/lib/jquery/jquery-1.4.4.min.js" type="text/javascript"></script>
</head>

<body>
<table width="100%" cellpadding="0" align="center" class="listshow" border="0" cellspacing="0">
    <tr>
      <td colspan="4" align="center">班次</td>
    </tr>
 <tr>
        <td class="black" width="30%" align="center" height="150">
            <select id="fb_list" multiple="multiple" style="text-align:center;width:300px;height:200px;"></select> 
        </td>
  <td align="center" width="5%">
   <input type="button" id="add" value="添加>>" />
   <input type="button" id="delete" value="<<删除" />
  </td>
  <td class="black" width="30%" align="center">
   <select id="select_list" multiple="multiple" style=" text-align:center;width:300px;height:200px;"></select>
  </td>
</tr>
</table>

<script>
$(document).ready(function(){
 for(var i=1;i<=5;i++) {
  $("#fb_list").append("<option value='"+i+"'>班次00"+i+"</option>"); 
 };
 
  $("#add").click(function(){
  if($("#fb_list option:selected").length>0) {
   $("#fb_list option:selected").each(function(){
    $("#select_list").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");
    $(this).remove(); 
   })
  }else {
   alert("请选择要添加的班次!");
  }
 });
 
 $("#delete").click(function() {
   if($("#select_list option:selected").length>0) {
    $("#select_list option:selected").each(function(){
     $("#fb_list").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");
      $(this).remove(); 
    })
   }else {
    alert("请选择要删除的班次!");
   }
 })
})
</script>
</body>
</html>

可以通过以下步骤实现select 中选中的多个选项从左边移到右边: 1. 获取 select 元素和左右两侧的容器元素。 2. 给 select 元素添加 change 事件监听器,当选中的选项发生变化时触发。 3. 在事件处理函数中,获取所有被选中的选项,将它们从左侧容器中移除,并添加到右侧容器中。 下面是一个示例代码: HTML 代码: ```html <select id="select" multiple> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> <option value="4">选项4</option> <option value="5">选项5</option> </select> <div> <div id="left-container"> <p>左侧容器</p> </div> <div id="right-container"> <p>右侧容器</p> </div> </div> ``` JavaScript 代码: ```js const select = document.getElementById('select'); const leftContainer = document.getElementById('left-container'); const rightContainer = document.getElementById('right-container'); select.addEventListener('change', () => { // 获取所有被选中的选项 const selectedOptions = Array.from(select.selectedOptions); // 将选中的选项从左侧容器中移除,添加到右侧容器中 selectedOptions.forEach(option => { leftContainer.removeChild(option); rightContainer.appendChild(option); }); }); ``` 在这个示例中,我们首先获取了 select 元素和左右两侧的容器元素,然后给 select 元素添加了 change 事件监听器,在事件处理函数中获取所有被选中的选项,将它们从左侧容器中移除,并添加到右侧容器中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值