如何在调用其他事件后隐藏jQuery下拉检查列表

Question

我正面临着一个问题。我有一个选择框。让我们有三个选择:不，Skip，是的。如果单击“是”，将出现一个新的div，其中包含我使用过这个插件的多个选择框

所以，我像这样写HTML：

<select class="man-catagory">
     <option value="no">No</option>
     <option value="skip">Skip</option>
     <option value="yes">Yes</option>
</select>
<div class="selection-content">
    <p class="left">Selection</p>
    <div class="left selection">
        <select class="multiple-select" multiple="multiple">
             <option>A</option>
             <option>B & C</option>
             <option>D & F</option>
             <option>1</option>
             <option>2</option>
             <option>3</option>
        </select>
    </div>
    <div class="clear"></div>
</div>

并设置.selection-content { display: none; }

然后添加jQuery

$('.man-catagory').change(function() {
    if($(this).val() == 'yes') 
        $('.selection-content').slideDown();
    else {
        $('.selection-content').slideUp();
});
$(".multiple-select").dropdownchecklist();

但是，不幸的是，当.selection-content在本地文件中选择"Yes“出现时，多重选择框的下拉列表没有出现。但是，当我把这些代码放在摇摆不定的地方时，它就来了。也许，在我的本地文件中，jquery的版本是不同的。无论如何，我需要在我的本地文件中进行多重选择，而不是篡改。所以，我用这样的方式排列代码：

$('.man-catagory').change(function() {
   if($(this).val() == 'yes') {
      $('.selection-content').slideDown();

      $(".multiple-select").dropdownchecklist();

   } else {
      $('.selection-content').slideUp();
   }
});

那时，它已经开始在我的本地文件中工作了。但是，它创造了一个新的问题。如果有人单击“是”，.selection-content将出现在多选框中。在这个阶段，一切都很完美。在此之后，如果选择"No"/"Skip"，.selection-content将与多个选择框一起消失。这也没关系。但是，在此之后，如果再次单击“是”，.selection-content将出现两个多选择框！

​

如果再次重复此过程，则第三次将有3个多选择框.在第四次，它将是四个多选框！因此，当我在if函数上调用这个多选择框时，我想

if($(this).val() == 'yes') {
   $('.selection-content').slideDown();
   $(".multiple-select").dropdownchecklist();
}

我不得不将与$(".multiple-select").dropdownchecklist();相反的东西称为 of 。我应该在那里写什么？

我像我的本地文件一样在小提琴上写作。请不要给我一个在change() function之外调用多重选择框的解决方案。这将在jsfiddle工作，但不适用于我的本地文件，原因不明--我告诉过一次。提前感谢

Answer 1

您可以使用一个类(例如，$(".multiple-select").dropdownchecklist(); )来确定它是否已被调用，而不是调用与dropdownchecklistactivated相反的东西。

变化

$(".multiple-select").dropdownchecklist({ 

至

$(".multiple-select").not(".dropdownchecklistactivated").addClass("dropdownchecklistactivated").dropdownchecklist({ 

更新Fiddle：http://jsfiddle.net/cydgdad0/2/

Answer 2

这是因为每次更改复选框时都要重新初始化插件，因此需要在change()函数之外初始化它：

 $(".multiple-select").dropdownchecklist({ 
        firstItemChecksAll: true, 
        textFormatFunction: function(options) {
            var selectedOptions = options.filter(":selected");
            var countOfSelected = selectedOptions.size();
            var size = options.size();
            switch(countOfSelected) {
               case 0: return "<i>Nobody<i>";
               case 1: return selectedOptions.text();
               case options.size(): return "<b>Everybody</b>";
               default: return countOfSelected + " People";
            }
        } 
    });    

 $('.man-catagory').change(function() {
    if($(this).val() == 'yes') {
        $('.selection-content').slideDown();



   } else {
       $('.selection-content').slideUp().hide();
   }
 });

这是小提琴