最近用到一个jq插件 jquery.multiselect2side 感觉蛮好用的,可后面有级联的需求发现自带的不好弄,于是乎改了下,在不影响之前功能的情况下 可以注入多种事件,增加自定义按钮等等
例如:
// 绑定控件: 当颜色被移动时应该及时反馈到vo对象中
sltobj.multiselect2side({
selectedPosition: 'right',
search: "搜索: ",
labeldx: '本色族拥有的颜色',
labelTop: '居顶',
labelBottom: '居底',
labelUp: '上',
labelDown: '下',
labelSort: '排序',
leftSel_after_remove: function(leftSel,rightSel){
// lft->rgt: 重新计算选中的颜色列表
var selected = [];
rightSel.find('option').each(function(){
selected[selected.length] = jQuery(this).val();
});
if (vo.selected_cg[dataInput.cg_id]){
vo.selected_cg[dataInput.cg_id].color_ids = selected;
}
},
rightSel_after_remove: function(leftSel,rightSel){
// rgt->lft: 重新计算选中的颜色列表以及默认颜色是否还存在
leftSel.find('option.default_color').each(function(){
jQuery(this).removeClass('default_color');
if (jQuery(this).hasClass('delete_color')){
jQuery(this).css({color: 'gray'});
}else {
jQuery(this).css({color: ''});
}
});
var selected = [];
rightSel.find('option').each(function(){
selected[selected.length] = jQuery(this).val();
});
if (vo.selected_cg[dataInput.cg_id]){
vo.selected_cg[dataInput.cg_id].color_ids = selected;
}
var default_color_id = vo.selected_cg[dataInput.cg_id].default_color_id;
if (default_color_id){
var finded = false;
for (var i=0; i < selected.length; i++){
if (selected[i] == default_color_id){
finded = true;
break;
}
}
if (!finded) vo.selected_cg[dataInput.cg_id].default_color_id = null;
}
},
rightSel_after_move: function(rightSel){
// 移动后重新计算选中的颜色列表
var selected = [];
rightSel.find('option').each(function(){
selected[selected.length] = jQuery(this).val();
});
if (vo.selected_cg[dataInput.cg_id]){
vo.selected_cg[dataInput.cg_id].color_ids = selected;
}
// console.log(selected);
},
// 自定义命令按钮
customCommand: [
{
cmdclass: 'SetDefaultColor',title: '设置色族的默认颜色',label: '默认色',
style: {
color: 'pink','background-color': 'gray'
},
eventMt: function(rightSel){
var selectedDx = rightSel.find("option:selected");
if (selectedDx.size() != 1){
return alertMsg.error("每次只能操作一种颜色");
}
rightSel.find('option.default_color').each(function(){
jQuery(this).removeClass('default_color');
if (jQuery(this).hasClass('delete_color')){
jQuery(this).css({color: 'gray'});
}else {
jQuery(this).css({color: ''});
}
});
selectedDx.addClass('default_color').css({color: 'pink'});
// console.log(selectedDx.get(0));
vo.setDefaultColorId(dataInput.cg_id,selectedDx.val());
}
}
]
});
jQuery('.SelSort').css("display","none");
demo效果
使用以上的功能弄出各种形式,例如:
<div class="pageContent">
<form method="post" onsubmit="return ProductSystem_FindProduct_product_tagfilter(this);">
<div class="pageFormContent" style="" layoutH="62">
<dl nowap>
<dt><?php echo __("标签类别")?>: </dt>
<dd>
<?php
Core_AppUtils::html_control('DropdownList','ProductSystem_FindProduct_product_tag_catalogs',array(
'items'=>array_flip(array(0 => '请选择标签类别') + $tag_catalogs),
'onchange' => 'ProductSystem_FindProduct_product_tagfilter_partily(this.value)',
));
?>
</dd>
</dl>
<fieldset style="clear: both;display: none;" id="psfp_tagfilter_partily_view">
<div style="padding-bottom: 10px"></div>
</fieldset>
<fieldset style="clear: both;">
<legend>已选择的标签</legend>
<div style="padding-bottom: 10px" id="psfp_tagfilter_selected_view">
</div>
</fieldset>
</div>
<div class="formBar">
<div class="buttonActive">
<div class="buttonContent"><button type="submit"><?php echo __("完成筛选")?></button></div>
</div>
</div>
</form>
</div>
<script>
var psfp_tagfilter_json_taglist= <?=empty($json_taglist) ? '{}' : $json_taglist?>;
var psfp_tagfilter_tags = <?=json_encode($tags) ?>;
var psfp_tagfilter_tag_catalogs = <?=json_encode($tag_catalogs) ?>;
var psfp_tagfilter_tag_catalogs_detail = <?=json_encode($tag_catalogs_detail) ?>;
var psfp_tagfilter_selected_cuurent_cid = 0;
psfp_tagfilter_selected_view_rendor();
function psfp_tagfilter_selected_view_rendor(){
var dd = [];
jQuery.each(psfp_tagfilter_json_taglist,function(cid,scitems){
if (scitems.length > 0){
for (var i=0; i < scitems.length; i++){
var tag_id = scitems[i];
if (!psfp_tagfilter_tags[tag_id]) continue;
var dt = [
'<span>',
'<input type="checkbox" class="psfp_tagfilter_selected_tagitem" name="psfp_tagfilter_selected_tagitems[]" value="'
+ tag_id + '" cid="' + cid + '" checked="checked">',
' ',psfp_tagfilter_tags[tag_id],
'</span>'
];
dd[dd.length] = dt.join('');
}
}
});
$('#psfp_tagfilter_selected_view').html(dd.join(' '));
// 绑定复选框事件
$('input.psfp_tagfilter_selected_tagitem:checkbox','#psfp_tagfilter_selected_view').unbind('click').bind('click',function(){
// console.log($(this).val(),$(this).attr('cid'));
// 重新绑定对应的大分类下的标签集合
var ddd = psfp_tagfilter_json_taglist[$(this).attr('cid')];
if (ddd && ddd.length > 0){
var ddd_new = [];
for (var ji=0; ji < ddd.length; ji++){
if (ddd[ji] == $(this).val()) continue;
ddd_new[ddd_new.length] = ddd[ji];
}
psfp_tagfilter_json_taglist[$(this).attr('cid')] = ddd_new;
if (ddd_new.length > 0 && $(this).attr('cid') == psfp_tagfilter_selected_cuurent_cid){
// 重新渲染 select框
ProductSystem_FindProduct_product_tagfilter_partily($(this).attr('cid'));
}
}
psfp_tagfilter_selected_view_rendor();
});
}
function ProductSystem_FindProduct_product_tagfilter(frm){
$.pdialog.closeCurrent();
var vdata = {};
jQuery.each(psfp_tagfilter_json_taglist,function(cid,selected_items){
if (selected_items.length > 0){
vdata[cid] = selected_items;
}
});
$('#json_taglist','#kscon-from-psfp-querylist').val($.toJSON(vdata));
return false;
}
function ProductSystem_FindProduct_product_tagfilter_partily(cid){
psfp_tagfilter_selected_cuurent_cid = cid;
var sltid = 'psfp_tagfilter_partily_view_select';
var partily_view_obj = $('#psfp_tagfilter_partily_view');
partily_view_obj.show();
if (jQuery('#' + sltid,partily_view_obj).size() < 1){
partily_view_obj.append('<select id="'+ sltid + '" multiple="multiple" name="'+ sltid +'[]"></select>');
}
var sltobj = jQuery('#' + sltid,partily_view_obj);
// 清空原始的子节点
sltobj.multiselect2side('destroy');
sltobj.empty();
if ( !psfp_tagfilter_tag_catalogs[cid] ) {
partily_view_obj.hide();
return;
}
var items = psfp_tagfilter_tag_catalogs_detail[cid];
var selected_items = psfp_tagfilter_json_taglist[cid];
// 渲染selector
var sltdom = sltobj.get(0);
for (var i=0; i < items.length; i++){
var tag_id = items[i]['id'];
if (!psfp_tagfilter_tags[tag_id]) continue;
sltdom.options[i] = new Option(psfp_tagfilter_tags[tag_id],tag_id);
if (selected_items && selected_items.length > 0){
for(var ja=0;ja<selected_items.length;ja++){
if (selected_items[ja] == tag_id){
sltdom.options[i].selected = true;
break;
}
}
}
}
jQuery('option:contains("kendelete-")',sltobj).each(function(){
jQuery(this).text(jQuery(this).text().replace('kendelete-','')).css({color: 'gray','text-decoration': 'line-through'});
});
sltobj.multiselect2side({
selectedPosition: 'right',
search: "搜索: ",
labeldx: '本色族拥有的颜色',
labelTop: '居顶',
labelBottom: '居底',
labelUp: '上',
labelDown: '下',
labelSort: '排序',
rightSel_after_remove: function(leftSel,rightSel){
// rgt->lft:
//console.log(cid,'rgt->lft');
var tt = [];
rightSel.find('option').each(function(){
tt[tt.length] = jQuery(this).val();
});
psfp_tagfilter_json_taglist[cid] = tt.length < 1 ? null : tt;
psfp_tagfilter_selected_view_rendor();
},
leftSel_after_remove: function(leftSel,rightSel){
// lft->rgt:
//console.log(cid,'lft->rgt');
var tt = [];
rightSel.find('option').each(function(){
tt[tt.length] = jQuery(this).val();
});
psfp_tagfilter_json_taglist[cid] = tt.length < 1 ? null : tt;
psfp_tagfilter_selected_view_rendor();
},
});
$('.SelSort').css("display","none");
}
</script>
相关推荐
jquery.multiselect.filter.js ; jquery.multiselect.filter.css
jquery.multiSelect.js
jquery.multiselect 下拉多选插件 下拉复选框插件 可以直接使用的demo
jquery.multiselect.js
jquery.multiSelect实例demo，直接打开html运行看效果
html多选下拉框，引用multiselect.filter后可实现搜索
jquery.multiselect.js多选下拉框选择代码
jquery.multiSelect多选下拉框简单实例
jquery.multiselect.js是一款基于jQuery UI的多项选择下拉列表框组件。该下拉列表功能强大，可以实现多选和单选，可制作打开和关闭下拉框时的炫酷动画效果，提供丰富的回调函数和其它方法。
下拉多选的工具，里面有demo及相应的文件，做法可参照博客内容
jQuery UI Multiselect是一个Web UI控件,它将html multiple select inputs转换成一个更直关、更易于操作的多选控件。支持全选添加和删除操作。
Jquery MultiSelect不错的左右选择的选择框 值得学习
一个很古老的下拉多选框插件了.github上找了半天,都是不完整的.自己把里面引入的JS和资源改成本地的.完全支持脱机使用
jquery-multiselect2side 将带到 github
这个插件允许用户以树型的形式来呈现列表复选框的选择。多用于权限管理中用于分配不同的权限。
本文实例为大家分享了jquery.multiselect多选下拉框的实现方法，供大家参考，具体内容如下 第一步：链接下列文件，如果没有，到此网页下载 https://github.com/ehynds/jquery-ui-multiselect-widget，此插件基于...
jquery的multiselect2side左右选择框插件