How can I add multiselect.js or sumoselect for checkbox dropdown

I have 2 issues:

  1. If i select more than one option from the 1st box the 2nd box will not show the relative options.
  2. I want to add multiselect checkbox dropdown instead of this. but unable to do it. Because if i add multiselect js or sumoselect. The query for showing relative options stops working.

Here is my code:

$(document).ready(function() {

  $('#catagory').on("change", function() {
    var cattype = $(this).val();
    optionswitch(cattype);
  });

});

function optionswitch(myfilter) {

  if ($('#optionstore').text() == "") {
    $('option[class^="sub-"]').each(function() {
      var optvalue = $(this).val();
      var optclass = $(this).prop('class');
      var opttext = $(this).text();
      optionlist = $('#optionstore').text() + "@%" + optvalue + "@%" + optclass + "@%" + opttext;
      $('#optionstore').text(optionlist);
    });
  }

  $('option[class^="sub-"]').remove();

  populateoption = rewriteoption(myfilter);
  $('#fileType').html(populateoption);
}

function rewriteoption(myfilter) {

  var options = $('#optionstore').text().split('@%');
  var resultgood = false;
  var myfilterclass = "sub-" + myfilter;
  var optionlisting = "";

  myfilterclass = (myfilter != "") ? myfilterclass : "all";

  for (var i = 3; i < options.length; i = i + 3) {
    if (options[i - 1] == myfilterclass || myfilterclass == "all") {
      optionlisting = optionlisting + '<option value="' + options[i - 2] + '" class="sub-' + options[i - 1] + '">' + options[i] + '</option>';
      resultgood = true;
    }
  }
  if (resultgood) {
    return optionlisting;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<select multiple="multiple" name="catagory" id="catagory" placeholder="Hello  im from placeholder" class="search-box">
     <option value="">All Food</option>
     <option value="Food1">Fruit</option>
     <option value="Food2">Veggies</option>
     <option value="Food3">Meat</option>
     <option value="Food4">Dairy</option>
     <option value="Food5">Bread</option>
    </select>


<select class="search-box" multiple="multiple" name="fileType" id="fileType">
     <option value="Fruit1" class="sub-Food1">Apples</option>
     <option value="Fruit2" class="sub-Food2">Pears</option>
     <option value="Fruit3" class="sub-Food3">Bananas</option>
     <option value="Fruit4" class="sub-Food4">Oranges</option>
     <option value="Veg1" class="sub-Food5">Peas</option>
     <option value="Veg2" class="sub-Food5">Carrots</option>
 
    </select>
<span id="optionstore" style="display:none;"></span>

https://jsfiddle.net/ao7h5p6e/4/

Answers 1

Related Articles