Change multiselect to single select dropdown with bootstrap-multiselect-CodePudding

We have used bootstrap-multiselect.js for multiselect dropdown in application. We have the code for multiselect as $(".select-drp").multiselect(). Now on a condition, we have to change this multiselect dropdown to single dropdown through jquery. Please suggest a way to achieve changing multiselect dropdown to single dropdown. Thanks in advance.

CodePudding user response：

If you can remove multiple attribute from select element, It would resolve your problem
If you can't, try below code but it will change all multiple select to single select, Modify as per your need

$('.multiple-select.one').multipleSelect();

let tempMultipleSelect = $.fn.multipleSelect;
$.fn.multipleSelect = function () {
    this.removeAttr('multiple');    //remove attribute as per your logic
    return tempMultipleSelect.apply(this, arguments);
}

$('.multiple-select.two').multipleSelect();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/multiple-select.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/multiple-select.min.css">

<label>Multiple</label>
<select  data-placeholder="Select" multiple>
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
    <option value="4">Fourth</option>
</select>
<hr>
<label>Multiple Changed As Single</label>
<select  multiple>
    <option selected disabled>Select</option>
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
    <option value="4">Fourth</option>
</select>

CodePudding user response：

There's a way to make the checkboxes behave like a radio button group and also have the ability to have every checkbox unchecked as well, see this section for more details. In the example, there's a button that toggles the multi-select form/to 'multiple' to/from 'single' selection behavior.

Details are commented in example

// Initialize plugin
$('.select').multiselect();
// Bind <form> to reset event
$('#interface').on('reset', multiSingle);
// Define status flag
let mode = 'multiple';

// Pass event object by default
function multiSingle(e) {
  /*
  Toggle reset button class, deselect any <option>s, and destroy the plugin
  */
  $('.toggle').toggleClass('multiple, single');
  $('.select').multiselect('deselectAll');
  $('.select').multiselect('destroy');
  /*
  If mode is 'multiple'...
  ...initialize plugin...
  ...change checkbox behavior to that of a radio button group, with the 
  added benefit of unchecking the currently checked checkbox...
  ...then set mode to 'single'
  */
  if (mode === 'multiple') {
    $('.select').multiselect({
      onChange: function(option, checked) {
        let values = [];
        $('.select option').each(function() {
          if ($(this).val() !== option.val()) {
            values.push($(this).val());
          }
        });
        $('.select').multiselect('deselect', values);
      }
    });
    mode = 'single';
    /*
    Otherwise initialize plugin as it was originally and set mode to
    'multiple'
    */
  } else {
    $('.select').multiselect();
    mode = 'multiple';
  }
}

.multiple::before {
  content: 'Single'
}

.single::before {
  content: 'Multiple'
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link href="//davidstutz.github.io/bootstrap-multiselect/docs/css/bootstrap-4.5.2.min.css" rel="stylesheet" />
  <link href="//davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet" />
</head>

<body>
  <form id='interface' class='container'>
    <fieldset class='row' style='display:flex'>
      <div class='btn-grp' style='margin:20px 0 0 0'>
        <select  multiple="multiple">
          <option value="cheese"> Cheese </option>
          <option value="tomatoes"> Tomatoes </option>
          <option value="mozzarella"> Mozzarella </option>
          <option value="mushrooms"> Mushrooms </option>
          <option value="pepperoni"> Pepperoni </option>
          <option value="onions"> Onions </option>
        </select>

        <button class='btn btn-primary toggle multiple' type='reset'></button>
      </div>
    </fieldset>
  </form>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="//davidstutz.github.io/bootstrap-multiselect/docs/js/bootstrap.bundle-4.5.2.min.js"></script>
  <script src="//davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>