Как отключить выбранные опции из одного списка в другой список в JQuery? - PullRequest
Новая
       1

Как отключить выбранные опции из одного списка в другой список в JQuery?

0 голосов
/ 01 ноября 2019

У меня три двойных списка, я использую jquery и bootstrap, вот моя проблема, просто нужно отключить выбранные опции один список на два других списка.

Например

У меня есть 3двойной список, например box-1, box-2, box-3, Каждый блок имеет 3 параметра, например, opt1, opt2, opt3 , если я выберу один параметр (opt1 ) из Box-1 , затем нажмите отправить, после отправки , затем эта опция (opt1) отключится для оставшихся двух блоков (блок-2 и box-3).

Я много раз пытался добиться этого, но не получил никаких результатов.

Надеюсь, мой вопрос понятен

ПРИМЕРКАРТИНА .. !!

enter image description here

Вот мой полный код ..

FIDDLE или PLAYCODE ЗДЕСЬ. .

Вот предварительный просмотр моей страницы ..

Нажмите для предварительного просмотра моей страницы

Вот мой пример фрагмента .. 

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

Ответы [ 2 ]

1 голос
/ 01 ноября 2019 

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');
                    }
                });
            });

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

Попробуйте этот скрипт. 

(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
            var $val = option.label;
            if (option.selected) {
                $row.addClass('selected');
                var $clone = $row.clone();
                // to disable other items of same name in other boxes
                $('.non-selected-wrapper .item').each(function(){ 
                  var $item_values = $(this).text();
                  if($item_values==$val){
                    $(this).addClass('selected');
                  }
                })
                // 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);
            }
            // to remove disabled class from item
            else{ 
              $('.non-selected-wrapper .item').each(function(){
                  var $item_values = $(this).text();
                  if($item_values==$val){
                    $(this).removeClass('selected');
                  }
                })
            }

            // 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');
    });
});
0 голосов
/ 01 ноября 2019

Поскольку все блоки имеют одинаковые параметры, поддерживайте один json, как этот 

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

, и динамически визуализируйте для всех трех блоков

надеюсь, это поможет

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...