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

最新推荐文章于 2022-10-28 15:46:18 发布

原创最新推荐文章于 2022-10-28 15:46:18 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function #button #xhtml #null #html

Jquery 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用jQuery操作select元素，通过onchange事件实现选择元素的添加和移除功能，确保用户在操作时避免重复添加相同元素。

<!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>