javascript - 如何为复选框下拉列表添加 multiselect.js 或 sumoselect

Question

我有两个问题:

1. 如果我从第一个框中选择多个选项，第二个框将不会显示相关选项。
2. 我想添加多选复选框下拉列表而不是这个。但做不到。因为如果我添加多选 js 或 sumoselect .显示相关选项的查询停止工作。

这是我的代码:

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

Answer 1

添加html后必须刷新或更新

$('#fileType').html(populateoption);
$("#fileType").trigger("chosen:updated");

在 fiddle 下方更改为多个选择你必须传递 myfilter 数组

https://jsfiddle.net/nimisha23/ao7h5p6e/7/