如何為復選框下拉列表添加multiselect.js或sumoselect

Question

我有2個問題：

1. 如果我從第一個框中選擇多個選項，則第二個框將不顯示相關選項。
2. 我想添加多選復選框下拉列表，而不是此列表。 但無法做到。 因為如果我添加multiselect 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");

在小提琴下面更改以進行多次選擇，您必須通過myfilter數組

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