如何在 JQuery 中禁用從一個列表框到另一個列表框的選定選項？

Question

我有三個雙列表框，我使用 jquery 和引導程序，這里我的問題是，只需要禁用一個列表框到另外兩個列表框的選定選項。

例如

我有 3 個雙列表框，如box-1、box-2、box-3，每個框有 3 個選項，如opt1、opt2、opt3 ，如果我 select 來自Box-1 的一個選項（opt1 ）然后單擊提交，提交后, 然后該選項(opt1)將禁用剩余的兩個框 (box-2 和 box-3)。

我已經嘗試了很多方法來實現這一點，但我沒有得到任何結果。

我希望我的問題可以理解

示例圖片..!!

這是我的完整代碼...

小提琴或播放代碼在這里..

這是我的頁面的預覽..

點擊預覽我的頁面

這是我的示例片段..

 (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>

Answer 1

由於所有盒子都有相同的選項，所以像這樣維護一個 json

[{name:"Allahabad Bank",id:1,selected:true},{name:"Andhra Bank",id:2,selected:false}]

並為所有三個盒子動態渲染

希望這可以幫助

Answer 2

 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 = []; }); });