jquery 左右互换
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" onchange="selectChange()"> <option value="曹操">曹操</option> <option value="刘备">刘备</option> <option value="孙权">孙权</option> </select> <input id="addBT" name="addBT" type="button" value="添加" /> <input id="rmBT" name="rmBT" type="button" value="移除" /> <select style="width:100px" size="5" multiple="MULTIPLE" id="myresult"> </select> </body>
页:
[1]