I have three dual listbox, im using jquery and bootstrap, here my problem is, just need to disable selected options one listbox to another two listboxs.
For example
I have 3 dual listbox,like box-1, box-2, box-3, Each box having 3 options like, opt1, opt2, opt3, If i select one option (opt1) from Box-1 then click submit, after submit, then the that option (opt1) going to disabled for remaining two boxs (box-2 and box-3).
I've tried manyway to achive this but i did't get any results.
I hope my question is understandable
EXAMPLE PICTURE..!!
Here is my full code..
Here is a preview of my page..
Here is my example snippet..
(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() {
option.element.prop('selected', false);
$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);
}
// Add click handler to mark row as selected
$row.click(function() {
option.element.prop('selected', 'selected');
$select.change();
});
// 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();
}
});
// 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');
});
});.alltabsubmit {
padding: 8px;
font-size: 15px;
line-height: 0.8;
color: #fff;
background-color: #680779;
border-color: #680779;
border-radius: 4px;
position: relative;
left: 43%;
}
.alltabreset {
padding: 8px;
font-size: 15px;
line-height: 0.8;
border-radius: 4px;
position: relative;
left: 43%;
color: black;
background-color: rgb(220, 215, 215);
border-radius: 4px;
}
nav>.nav.nav-tabs {
border: none;
color: #fff;
background: #272e38;
border-radius: 0;
}
nav>div a.nav-item.nav-link,
nav>div a.nav-item.nav-link.active {
border: none;
padding: 10px 25px;
color: #fff;
background: #680779;
border-radius: 0;
}
nav>div a.nav-item.nav-link.active:after {
content: "";
position: relative;
top: 52px !important;
right: 10% !important;
border: 15px solid transparent;
border-top-color: #680779;
}
.tab-content {
background: #fdfdfd;
line-height: 25px;
border: 1px solid #ddd;
border-top: 5px solid #dda0dd;
border-bottom: 5px solid #dda0dd;
padding: 30px 25px;
}
nav>div a.nav-item.nav-link:hover,
nav>div a.nav-item.nav-link:focus {
border: none;
background: #dda0dd;
color: #fff;
border-radius: 0;
transition: 0.20s linear;
}
.tabContent {
padding-top: 18px;
margin-left: 10px;
margin-right: 10px;
}
/* FIRST TAB*/
.multi-wrapper {
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden;
width: 70% !important;
position: relative;
left: 15%;
top: 35%;
}
.multi-wrapper .non-selected-wrapper,
.multi-wrapper .selected-wrapper {
box-sizing: border-box;
display: inline-block;
height: 300px !important;
overflow-y: scroll;
padding: 10px;
vertical-align: top;
width: 50%;
}
.multi-wrapper .non-selected-wrapper {
background: #fafafa;
border-right: 1px solid #ccc;
}
.multi-wrapper .selected-wrapper {
background: #fff;
}
.multi-wrapper .item {
cursor: pointer;
display: block;
padding: 5px 10px;
color: #680779;
}
.multi-wrapper .item:hover {
background: #ececec;
border-radius: 2px;
}
.multi-wrapper .search-input {
border: 0;
border-bottom: 1px solid #ccc;
border-radius: 0;
display: block;
font-size: 1em;
margin: 0;
outline: 0;
padding: 10px 20px;
width: 100%;
}
.multi-wrapper .non-selected-wrapper .item.selected {
opacity: 0.5;
cursor: not-allowed !important;
}
.multi-wrapper .non-selected-wrapper .row.selected:hover {
background: inherit;
cursor: inherit;
}
/* Third Tab */
.thirdTab {
position: relative;
left: 35%;
}
.pnl_slet {
width: 22em;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><html><body class="hold-transition sidebar-mini layout-fixed"><!-- Content Wrapper. Contains page content --><div class="content-wrapper"><section class="content"><div class="container-fluid"><!-- Main content --><section class="content"><div class="card card-default card-merge"><div class="card-body"><div class="tab-content"><div class="tab-pane active" id="bankTab"><h5>Box-1</h5><form class="form" action="##" method="post" id="banktabForm"><div class="selectContainer" id="bankTab"><select multiple="multiple" name="bankList" id="firstData"><option name="opt1" value="AB">Allahabad Bank</option><option name="opt2" value="AN">Andhra Bank</option><option name="opt3" value="BI">Bank of India</option><option name="opt4" name="opt3" value="BB">Bank of Baroda</option><option name="opt5" value="BM">Bank of Maharashtra</option></select></div><div class="form-group"><div class="col-xs-12"><br><button class="btn btn-lg btn-success alltabsubmit" type="submit" id="firstId" onclick="showgroup_id();"><i class="glyphicon glyphicon-ok-sign"></i>Submit</button><button class="btn btn-lg alltabreset" type="reset" id="tabReset"><i class="glyphicon glyphicon-repeat"></i> Reset</button></div></div></form></div><!-- SECOND TAB --><div class="tab-pane" id="cashTab"><h5>Box-2</h5><form class="form" action="##" method="post" id="cashtabForm"><div class="cashContainer" id="cashTab"><select multiple="multiple" name="cashList" id="cashList"><option value="AB">Allahabad Bank</option><option value="AN">Andhra Bank</option><option value="BI">Bank of India</option><option value="BB">Bank of Baroda</option><option value="BM">Bank of Maharashtra</option></select></div><div class="form-group"><div class="col-xs-12"><br><button class="btn btn-lg btn-success alltabsubmit" type="submit" onclick="selList();"><i class="glyphicon glyphicon-ok-sign"></i>Submit</button><button class="btn btn-lg alltabreset" type="reset" id="tabReset"><i class="glyphicon glyphicon-repeat"></i>Reset</button></div></div></form></div><!-- LAST TAB --><div class="tab-pane" id="tdsTab"><h5>Box-3</h5><form class="form" action="##" method="post" id="tdstabForm"><div class="cashContainer" id="tdsTab"><select multiple="multiple" name="tdsSel" id="tdsSel"><option value="AB">Allahabad Bank</option><option value="AN">Andhra Bank</option><option value="BI">Bank of India</option><option value="BB">Bank of Baroda</option><option value="BM">Bank of Maharashtra</option></select></div><div class="form-group"><div class="col-xs-12"><br><button class="btn btn-lg btn-success pull-right alltabsubmit" type="submit" onclick="tdsList();"><i class="glyphicon glyphicon-ok-sign"></i> Save</button><button class="btn btn-lg alltabreset" type="reset" id="tabReset"><i class="glyphicon glyphicon-repeat"></i> Reset</button></div></div></form></div></div></div></div></section></div></section></div></body></html>