我有三个双列表框，我使用 jquery 和引导程序，这里我的问题是，只需要禁用选定的选项一个列表框到另外两个列表框。例如我有 3 个双列表框，如box-1、box-2、box-3，每个框有 3 个选项，如opt1、opt2、opt3，如果我从Box-1 中选择一个选项（opt1）然后点击提交，提交后，然后该选项(opt1)将禁用剩余的两个框（框 2 和框 3）。我已经尝试了很多方法来实现这一目标，但我没有得到任何结果。我希望我的问题是可以理解的示例图片..！！这是我的完整代码...FIDDLE 或 PLAYCODE 在这里..这是我的页面的预览..点击预览我的页面
2 回答
皈依舞
TA贡献1851条经验 获得超3个赞
var val = new Array();
(function($) {
function refresh_select($select) {
// Clear columns
$select.wrapper.selected.html('');
$select.wrapper.non_selected.html('');
// Get search value
if ($select.wrapper.search) {
var query = $select.wrapper.search.val();
}
var options = [];
// Find all select options
$select.find('option').each(function() {
var $option = $(this);
var value = $option.prop('value');
var label = $option.text();
var selected = $option.is(':selected');
options.push({
value: value,
label: label,
selected: selected,
element: $option,
});
});
// Loop over select options and add to the non-selected and selected columns
options.forEach(function(option) {
var $row = $('<a tabindex="0" role="button" class="item"></a>').text(option.label).data('value', option.value);
// Create clone of row and add to the selected column
if (option.selected) {
$row.addClass('selected');
var $clone = $row.clone();
// Add click handler to mark row as non-selected
$clone.click(function() {
// to remove disabled class from item
option.element.prop('selected', false);
val.pop(option.label);
$('.non-selected-wrapper .item.selected').each(function() {
var $item_values = $(this).text();
if ($.inArray($item_values, val) == -1) {
$(this).removeClass('selected');
}
});
$select.change();
});
// Add key handler to mark row as selected and make the control accessible
$clone.keypress(function() {
if (event.keyCode === 32 || event.keyCode === 13) {
// Prevent the default action to stop scrolling when space is pressed
event.preventDefault();
option.element.prop('selected', false);
$select.change();
}
});
$select.wrapper.selected.append($clone);
}
if ($.inArray(option.label, val) !== -1) {
$row.addClass('selected');
}
// Add click handler to mark row as selected
$row.click(function() {
// to disable other items of same name in other boxes
if ($.inArray(option.label, val) == -1) {
option.element.prop('selected', 'selected');
$select.change();
val.push(option.label);
}
$('.non-selected-wrapper .item').each(function() {
var $item_values = $(this).text();
if ($.inArray($item_values, val) !== -1) {
$(this).addClass('selected');
}
});
$('.pnl_slet option').each(function() {
var options = $(this).text();
if ($.inArray(options, val) !== -1) {
$(this).attr('disabled','true');
}
});
});
// Add key handler to mark row as selected and make the control accessible
$row.keypress(function() {
if (event.keyCode === 32 || event.keyCode === 13) {
// Prevent the default action to stop scrolling when space is pressed
event.preventDefault();
option.element.prop('selected', 'selected');
$select.change();
}
});
$('.pnl_slet').change(function(){
var selected_text = $('.pnl_slet option:selected').text();
// to disable other items of same name in other boxes
if ($.inArray(selected_text, val) == -1) {
option.element.prop('selected', 'selected');
//$select.change();
val.push(selected_text);
}
$('.non-selected-wrapper .item').each(function() {
var $item_values = $(this).text();
if ($.inArray($item_values, val) !== -1) {
$(this).addClass('selected');
}
});
})
// Apply search filtering
if (query && query != '' && option.label.toLowerCase().indexOf(query.toLowerCase()) === -1) {
return;
}
$select.wrapper.non_selected.append($row);
});
}
$.fn.multi = function(options) {
var settings = $.extend({
'enable_search': true,
'search_placeholder': 'Search...',
}, options);
return this.each(function() {
var $select = $(this);
// Check if already initalized
if ($select.data('multijs')) {
return;
}
// Make sure multiple is enabled
if (!$select.prop('multiple')) {
return;
}
// Hide select
$select.css('display', 'none');
$select.data('multijs', true);
// Start constructing selector
var $wrapper = $('<div class="multi-wrapper">');
// Add search bar
if (settings.enable_search) {
var $search = $('<input class="search-input" type="text" />').prop('placeholder', settings.search_placeholder);
$search.on('input change keyup', function() {
refresh_select($select);
})
$wrapper.append($search);
$wrapper.search = $search;
}
// Add columns for selected and non-selected
var $non_selected = $('<div class="non-selected-wrapper">');
var $selected = $('<div class="selected-wrapper" id="selectedList">');
$wrapper.append($non_selected);
$wrapper.append($selected);
$wrapper.non_selected = $non_selected;
$wrapper.selected = $selected;
$select.wrapper = $wrapper;
// Add multi.js wrapper after select element
$select.after($wrapper);
// Initialize selector with values from select element
refresh_select($select);
// Refresh selector when select values change
$select.change(function() {
refresh_select($select);
});
});
}
})(jQuery);
$(document).ready(function() {
$('select').multi({
search_placeholder: 'Search',
});
$('.alltabreset').click(function() {
$('.selected-wrapper').empty();
$('a').removeClass('selected');
val = [];
});
});
暮色呼如
TA贡献1853条经验 获得超9个赞
由于所有框都有相同的选项，因此像这样维护单个 json
[{name:"Allahabad Bank",id:1,selected:true},{name:"Andhra Bank",id:2,selected:false}]并为所有三个框动态渲染
希望这可以帮助
添加回答
举报
0/150
提交
取消