如何在调用另一个事件后隐藏 jQuery Dropdown Check List

Question

我遇到了一个问题。我有一个选择框。让我们有三个选项：否，跳过，是。如果单击“是”，将出现一个新的 div，其中包含我使用过的多选框this plugin

所以，我这样写 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 在我的本地文件中选择“是”出现时，多选框的下拉菜单并没有出现。但是，当我将这些代码放在 jsfiddle 时，它​​就出现了。可能是，在我的本地文件中，jquery 的版本不同。无论如何，我需要在我的本地文件而不是 jsfiddle 上进行多选。所以，我这样安排我的代码：

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

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

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

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

如果再次重复这个过程，第三次会有3个多选框。第四次，它将是四个多选框！所以，我认为当我在 if function 中调用该多选框时：

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

我必须在 else 函数上调用与 $(".multiple-select").dropdownchecklist(); 相对的东西。我应该在那里写什么？

我在jsfiddle 写过我的本地文件。请不要给我一个在change() function 之外调用多选框的解决方案。这将在 jsfiddle 上工作，但在我的本地文件中不工作，原因不明——我曾经说过。提前致谢

Answer 1

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

改变

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

到

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

更新小提琴：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();
   }
 });

这里是Fiddle