如何在 JQuery 中禁用从一个列表框到另一个列表框的选定选项？

Question

我有三个双列表框，我使用 jquery 和引导程序，这里我的问题是，只需要禁用选定的选项一个列表框到另外两个列表框。

例如

我有 3 个双列表框，如box-1、box-2、box-3，每个框有 3 个选项，如opt1、opt2、opt3，如果我从Box-1 中选择一个选项（opt1）然后点击提交，提交后，然后该选项(opt1)将禁用剩余的两个框（框 2 和框 3）。

我已经尝试了很多方法来实现这一目标，但我没有得到任何结果。

我希望我的问题是可以理解的

示例图片..！！

这是我的完整代码...

FIDDLE 或 PLAYCODE 在这里..

这是我的页面的预览..

点击预览我的页面

Answer 1

var val = new Array();(function($) {&nbsp; function refresh_select($select) {&nbsp; &nbsp; // Clear columns&nbsp; &nbsp; $select.wrapper.selected.html('');&nbsp; &nbsp; $select.wrapper.non_selected.html('');&nbsp; &nbsp; // Get search value&nbsp; &nbsp; if ($select.wrapper.search) {&nbsp; &nbsp; &nbsp; var query = $select.wrapper.search.val();&nbsp; &nbsp; }&nbsp; &nbsp; var options = [];&nbsp; &nbsp; // Find all select options&nbsp; &nbsp; $select.find('option').each(function() {&nbsp; &nbsp; &nbsp; var $option = $(this);&nbsp; &nbsp; &nbsp; var value = $option.prop('value');&nbsp; &nbsp; &nbsp; var label = $option.text();&nbsp; &nbsp; &nbsp; var selected = $option.is(':selected');&nbsp; &nbsp; &nbsp; options.push({&nbsp; &nbsp; &nbsp; &nbsp; value: value,&nbsp; &nbsp; &nbsp; &nbsp; label: label,&nbsp; &nbsp; &nbsp; &nbsp; selected: selected,&nbsp; &nbsp; &nbsp; &nbsp; element: $option,&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });&nbsp; &nbsp; // Loop over select options and add to the non-selected and selected columns&nbsp; &nbsp; options.forEach(function(option) {&nbsp; &nbsp; &nbsp; var $row = $('<a tabindex="0" role="button" class="item"></a>').text(option.label).data('value', option.value);&nbsp; &nbsp; &nbsp; // Create clone of row and add to the selected column&nbsp; &nbsp; &nbsp; if (option.selected) {&nbsp; &nbsp; &nbsp; &nbsp; $row.addClass('selected');&nbsp; &nbsp; &nbsp; &nbsp; var $clone = $row.clone();&nbsp; &nbsp; &nbsp; &nbsp; // Add click handler to mark row as non-selected&nbsp; &nbsp; &nbsp; &nbsp; $clone.click(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // to remove disabled class from item&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; option.element.prop('selected', false);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; val.pop(option.label);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.non-selected-wrapper .item.selected').each(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var $item_values = $(this).text();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($.inArray($item_values, val) == -1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).removeClass('selected');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $select.change();&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; // Add key handler to mark row as selected and make the control accessible&nbsp; &nbsp; &nbsp; &nbsp; $clone.keypress(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (event.keyCode === 32 || event.keyCode === 13) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Prevent the default action to stop scrolling when space is pressed&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; option.element.prop('selected', false);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $select.change();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; $select.wrapper.selected.append($clone);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; if ($.inArray(option.label, val) !== -1) {&nbsp; &nbsp; &nbsp; &nbsp; $row.addClass('selected');&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; // Add click handler to mark row as selected&nbsp; &nbsp; &nbsp; $row.click(function() {&nbsp; &nbsp; &nbsp; &nbsp; // to disable other items of same name in other boxes&nbsp; &nbsp; &nbsp; &nbsp; if ($.inArray(option.label, val) == -1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; option.element.prop('selected', 'selected');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $select.change();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; val.push(option.label);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; $('.non-selected-wrapper .item').each(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var $item_values = $(this).text();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($.inArray($item_values, val) !== -1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).addClass('selected');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; $('.pnl_slet option').each(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var options = $(this).text();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($.inArray(options, val) !== -1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).attr('disabled','true');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; // Add key handler to mark row as selected and make the control accessible&nbsp; &nbsp; &nbsp; $row.keypress(function() {&nbsp; &nbsp; &nbsp; &nbsp; if (event.keyCode === 32 || event.keyCode === 13) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Prevent the default action to stop scrolling when space is pressed&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; option.element.prop('selected', 'selected');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $select.change();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.pnl_slet').change(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var selected_text = $('.pnl_slet option:selected').text();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // to disable other items of same name in other boxes&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($.inArray(selected_text, val) == -1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; option.element.prop('selected', 'selected');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //$select.change();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; val.push(selected_text);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.non-selected-wrapper .item').each(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var $item_values = $(this).text();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($.inArray($item_values, val) !== -1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).addClass('selected');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; // Apply search filtering&nbsp; &nbsp; &nbsp; if (query && query != '' && option.label.toLowerCase().indexOf(query.toLowerCase()) === -1) {&nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; $select.wrapper.non_selected.append($row);&nbsp; &nbsp; });&nbsp; }&nbsp; $.fn.multi = function(options) {&nbsp; &nbsp; var settings = $.extend({&nbsp; &nbsp; &nbsp; 'enable_search': true,&nbsp; &nbsp; &nbsp; 'search_placeholder': 'Search...',&nbsp; &nbsp; }, options);&nbsp; &nbsp; return this.each(function() {&nbsp; &nbsp; &nbsp; var $select = $(this);&nbsp; &nbsp; &nbsp; // Check if already initalized&nbsp; &nbsp; &nbsp; if ($select.data('multijs')) {&nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; // Make sure multiple is enabled&nbsp; &nbsp; &nbsp; if (!$select.prop('multiple')) {&nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; // Hide select&nbsp; &nbsp; &nbsp; $select.css('display', 'none');&nbsp; &nbsp; &nbsp; $select.data('multijs', true);&nbsp; &nbsp; &nbsp; // Start constructing selector&nbsp; &nbsp; &nbsp; var $wrapper = $('<div class="multi-wrapper">');&nbsp; &nbsp; &nbsp; // Add search bar&nbsp; &nbsp; &nbsp; if (settings.enable_search) {&nbsp; &nbsp; &nbsp; &nbsp; var $search = $('<input class="search-input" type="text" />').prop('placeholder', settings.search_placeholder);&nbsp; &nbsp; &nbsp; &nbsp; $search.on('input change keyup', function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; refresh_select($select);&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; $wrapper.append($search);&nbsp; &nbsp; &nbsp; &nbsp; $wrapper.search = $search;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; // Add columns for selected and non-selected&nbsp; &nbsp; &nbsp; var $non_selected = $('<div class="non-selected-wrapper">');&nbsp; &nbsp; &nbsp; var $selected = $('<div class="selected-wrapper" id="selectedList">');&nbsp; &nbsp; &nbsp; $wrapper.append($non_selected);&nbsp; &nbsp; &nbsp; $wrapper.append($selected);&nbsp; &nbsp; &nbsp; $wrapper.non_selected = $non_selected;&nbsp; &nbsp; &nbsp; $wrapper.selected = $selected;&nbsp; &nbsp; &nbsp; $select.wrapper = $wrapper;&nbsp; &nbsp; &nbsp; // Add multi.js wrapper after select element&nbsp; &nbsp; &nbsp; $select.after($wrapper);&nbsp; &nbsp; &nbsp; // Initialize selector with values from select element&nbsp; &nbsp; &nbsp; refresh_select($select);&nbsp; &nbsp; &nbsp; // Refresh selector when select values change&nbsp; &nbsp; &nbsp; $select.change(function() {&nbsp; &nbsp; &nbsp; &nbsp; refresh_select($select);&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });&nbsp; }})(jQuery);$(document).ready(function() {&nbsp; $('select').multi({&nbsp; &nbsp; search_placeholder: 'Search',&nbsp; });&nbsp; $('.alltabreset').click(function() {&nbsp; &nbsp; $('.selected-wrapper').empty();&nbsp; &nbsp; $('a').removeClass('selected');&nbsp; &nbsp; val = [];&nbsp; });});

Answer 2

由于所有框都有相同的选项，因此像这样维护单个 json[{name:"Allahabad&nbsp;Bank",id:1,selected:true},{name:"Andhra&nbsp;Bank",id:2,selected:false}]并为所有三个框动态渲染希望这可以帮助