一、實現效果
二、要求
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(); });