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