jquery 左右互换

最新推荐文章于 2021-06-19 08:44:11 发布

iteye_2038

最新推荐文章于 2021-06-19 08:44:11 发布

阅读量239

点赞数

分类专栏： js 文章标签： jquery ViewUI

本文链接：https://blog.csdn.net/iteye_2038/article/details/82308589

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JQUERY 左右互换,每天一记

  <!-- author==>> Jian -->  
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
   <html xmlns="http://www.w3.org/1999/xhtml">  
   <head>  
   <meta http-equiv="Content-Type" content="text/html; charset=gbk" />  
   <title>JQuery操作select</title>  
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
   <script language="javascript">  
   // select 中的 onchange()事件  
   function selectChange() {  
       $("#addBT").attr("disabled",false); // 首先将添加按钮设为可用  
       var selectObject = $("#myselect").val(); // 取得左侧所选取的值  
       $("#myresult").find("option").each(function(){ // 以 option 为参数 查询右侧所有的可选项并逐一遍历  
           if($(this).val() == selectObject){ // 判断左侧中选择的项在右侧中是否已经存在  
               //alert("I got you!");  
               $("#addBT").attr("disabled",true); // 如果上面的判断存在则将添加按钮设为不可用, 禁止重复添加  
           }  
       });   
   }  
     
   // 左侧增加到右侧  
   function toAdd() {  
     
       var selectObject = $("#myselect").val(); // 取得左侧所选取的值  
       if (null==selectObject) {  
           alert("提示：您未选择任何可以添加的内容!");  
           return;  
       }  
       var content = "<option value='"+selectObject+"'>"+selectObject+"</option>"; // 填充右侧的值  
       $("#myresult").append(content);  
       selectChange(); // 最后调用 selectChange()模拟onChange()事件, 主要是为了能够及时地将禁用的添加按钮重新激活(如果有必要)  
         
   }  
     
   // 右侧移除  
   function toRemove() {  
       var removeObject = $("#myresult option:selected").val(); // 取得右侧要移除的内容, 注意可多选  
       if (null==removeObject) {  
           alert("提示：您未选择任何要删除的内容!");  
           return;  
       }  
       $("#myresult option:selected").remove();  
       selectChange(); // 与toAdd()中调用原理一致  
   }  
     
   </script>  
   </head>  
     
   <body>   
   <select style="width:100px" id="myselect" size="5" οnchange="selectChange()">  
     <option value="曹操">曹操</option>  
     <option value="刘备">刘备</option>  
     <option value="孙权">孙权</option>  
   </select>  
   <input id="addBT" name="addBT" type="button" value="添加" οnclick="toAdd()"/>  
   <input id="rmBT" name="rmBT" type="button" value="移除" οnclick="toRemove()"/>  
   <select style="width:100px" size="5" multiple="MULTIPLE" id="myresult">  
   </select>  
   </body>