JQuery 实现Selct 多分类从左到右的操作

来源：互联网发布：tp非法数据对象编辑：程序博客网时间：2024/06/05 10:11
<!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="jquery-1.4.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><p style="color:#F60; size:auto">author: Jian</p><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="添加" onclick="toAdd()"/><input id="rmBT" name="rmBT" type="button" value="移除" onclick="toRemove()"/><select style="width:100px" size="5" multiple="MULTIPLE" id="myresult"></select></body>