js從一個select選擇數據添加到另一個select(包括移除)


一、實現效果

二、要求

  1、選中左側的菜單,點擊“>>”,該菜單(1項或多項選中的)將添加到右側菜單

  2、選中右側菜單,點擊“<<”,則移除選中的菜單

  3、點擊“>>”,如果此時右側菜單中已經有了左側菜單的項目,則提示“已經添加過了”,然后把未添加的菜單添加到右側

三、代碼

// 這個可有可無,沒有這個則用$,有這句話則使用jq
var jq = jQuery.noConflict();

// 點擊“添加>>”按鈕
var selectedCateIds = jq("#selectedCateIds"); //已綁定菜單
jq("#addItemBtn").on('click',function () {
    var html = "";
    jq("#allCateIds option:selected").each(function () { //可綁定菜單中選中的
        var option = jq(this);
        if(selectedCateIds.find("option[value="+ option.val() +"]").length == 0) {
            if (option.hasClass('menuA')) {
                selectedCateIds.append("<option value='"+ option.val() +"' class='menuA'>"+ option.text() +"</option>");
            }else{
                selectedCateIds.append("<option value='"+ option.val() +"'>"+ option.text() +"</option>");
			}
        }else {
            alert('該菜單已經綁定過了');
        }
    });
});

  

// 點擊 “移除”按鈕
jq("#removeItemBtn").on('click',function () {
    jq("#selectedCateIds option:selected").remove();
});

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM