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

Question

我有三个双列表框，我正在使用 jquery 和 bootstrap，我的问题是，只需要禁用一个列表框到另外两个列表框的选定选项。

例如

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

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

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

示例图片..!!

这是我的完整代码...

FIDDLE or PLAYCODE HERE..

这是我的页面的预览..

Click to preview my page

这是我的示例片段..

(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

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