jquery两个select控件左右移动并上下移动-创新互联

<script type="text/javascript" src="jquery-1.3.2.min.js" />
<table boder='1'>
 <tr>
   <th>待选字段</th>
   <td></td>
   <th>报表导出字段</th>
 </tr>
 <tr>
   <td><select name="selectOne" size="5" multiple style="height:300px!important; width:150px;">
       <?php foreach($arrFieldName as $key=>$val){?>
       <option val="<?php echo $key;?>"><?php echo $val;?></option>
       <?php }?>
     </select></td>
    <td style="width:100px; text-align:center;"><input type="button" id="buttonToRight" value="&raquo;"  style="background:none; width:50px;" />
     <br/>
     <br/>
     <input type="button" value="&laquo;" id="buttonToLeft" style="background:none; width:50px;" />
     <br/>
     <br/>
     <input type="button" value="&uarr;" id="buttonToUp" style="background:none; width:50px;" />
     <br/>
     <br/>
     <input type="button" value="&darr;" id="buttonToDown" style="background:none; width:50px;" />
     </td>
   <td><select name="selectTwo" size="5" multiple style="height:300px!important; width:150px;">
     </select></td>
 </tr>
 <tr>
   <td ></td>
   <td><a class="button"><span class="icon icon-output">确认导出</span></a></td>
   <td></td>
 </tr>
</table>
<script type="text/javascript">
$(function(){
   $('#buttonToRight').click(function(){
      if($("select[name=selectOne] option:selected").length>0){
           $("select[name=selectOne] option:selected").each(function(i){
                $("select[name=selectTwo]").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option"); //从左移到右边
                $(this).remove(); //左边的删除
           });
      }
   });
   $('#buttonToLeft').click(function(){
       if($("select[name=selectTwo] option:selected").length>0){
            $("select[name=selectTwo] option:selected").each(function(i){
                 $("select[name=selectOne]").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");
                 $(this).remove();
            });
       }
      });
   $('#buttonToUp').click(function(){
      if($("select[name=selectTwo] option:selected").length>0){
           $("select[name=selectTwo] option:selected").each(function(i){
              $(this).prev().before($(this)); //上移
           });
       }
   });
   $('#buttonToDown').click(function(){
      if($("select[name=selectTwo] option:selected").length>0){
           $("select[name=selectTwo] option:selected").each(function(i){
              $(this).next().after($(this));
               $(this).insertAfter($(this).next()); //下移
           });
       }
   });
});
</script>
 

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

创新互联从2013年成立，先为观山湖等服务建站，观山湖等地企业，进行企业商务咨询服务。为观山湖企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

网页标题：jquery两个select控件左右移动并上下移动-创新互联
文章网址：https://www.cdcxhl.com/article38/hissp.html

成都网站建设公司_创新互联，为您提供移动网站建设、建站公司、网站设计公司、网站内链、品牌网站设计、企业建站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联