最近用到一个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插件详解》 在网页开发中，多选下拉框是一个常见的交互元素，用于提供多个选项供用户选择。然而，当选项数量庞大时，用户查找所需选项可能会变得困难。为了解决这一问题，jQuery社区...
jquery.multiSelect.js
接着，选择需要增强的`<select>`元素，并调用`.multiselect()`方法，通常在文档加载完成后的事件处理函数中进行，如`$(document).ready()`。最后，通过设置参数，可以自定义插件的行为，比如是否启用过滤功能、筛选...
《jQuery.multiSelect插件实战详解及应用》 在Web开发中，我们经常遇到需要实现多选功能的场景，比如在创建表单时选择多个选项。jQuery库提供了丰富的插件来帮助开发者实现这样的需求，其中jQuery.multiSelect就是...
2. 在页面中引入jQuery库和jQuery.multiSelect插件的JavaScript和CSS文件。 3. 使用jQuery选择器找到`<select>`元素，然后调用`.multiSelect()`方法，初始化插件。 例如： ```html 选项1 <option value="2">选项...
jquery.multiselect.js
2. **初始化插件**：对需要增强的`<select>`元素应用`multiselect`方法，例如： ```javascript $('#yourSelect').multiselect(); ``` 3. **配置参数**：可以根据需求设置插件的配置项，例如开启搜索功能： ```...
《jQuery Multiselect：打造高效的下拉复选框体验》 在网页开发中，用户界面的交互性和易用性是至关重要的。jQuery Multiselect插件，正如其名，为开发者提供了一个功能强大的下拉多选解决方案，它使得复选框在有限...
在文档加载完成后，通过jQuery选择器找到该`<select>`元素，并调用`.multiSelect()`方法初始化插件： ```javascript $(document).ready(function() { $('#example').multiSelect(); }); ``` ### 4. 配置与选项 `...
**jQuery UI Multiselect** 是一个基于 **jQuery UI** 框架的插件，它针对HTML的`<select>`元素提供了增强的多选功能。这个控件设计得更加直观且用户友好，使得用户在网页应用中进行多选操作时能有更佳的体验。它...
**jQuery Multiselect2Side 插件详解** 在前端开发中，多选下拉框是一个常见的交互元素，尤其在数据筛选、表单填写等场景中。然而，传统的多选下拉框可能无法满足某些复杂的界面需求，例如并排展示选项。为了解决这...
《自己封装好的下拉框多选插件jqueryUi.multiselect》 在Web开发中，交互性和用户体验是至关重要的，而下拉框多选插件在数据筛选、信息选择等方面起着重要作用。`jqueryUi.multiselect`就是这样一个插件，它为用户...
jquery.multiselect.js是一款基于jQuery UI的多项选择下拉列表框组件。该下拉列表功能强大，可以实现多选和单选，可制作打开和关闭下拉框时的炫酷动画效果，提供丰富的回调函数和其它方法。
- **初始化插件**：在DOM加载完成后，使用jQuery选择器找到对应的`<select>`元素，并调用`.multiselect()`方法进行初始化。 ```javascript $(document).ready(function() { $("#example").multiselect(); }); ``` ...
使用`Multiselect2Side`插件非常简单，只需要对目标多选框元素应用`multiselect2side`类，并调用jQuery的`.multiselect2side()`方法： ```html <select multiple class="multiselect2side"> ...
2.选中项的提示信息，如图中第2部分 selectedText 默认：# selected $("select").multiselect({ selectedText: 选中【#】项 ，总共【 #】项" }); 3.被选中的value值，如图第1部分显示的内容 $("select")....