如何自動選擇多選框chzn-select-deselect？

Question

我有一個multiselect chzn-select-deselect框。當我選擇一個特定的值時，我想一次選擇多個值。我有以下的HTML：

<select id="filter_list_dropdwn" class="inp direct_value_opp fl" multiple="multiple" name="data[value1][]"> 
     <option value="1" parent_id="0"> parent1</option> 
     <option value="2" parent_id="1"> child1 of parent1</option> 
     <option value="3" parent_id="1"> child2 of parent1</option> 
     <option value="4" parent_id="3"> child of child3</option> 
</select> 

如果我選擇parent1然後自動它的孩子將被選中。工作腳本是這樣的：

這裏是上述功能的小提琴：http://jsfiddle.net/NEXv3/

現在，我想申請相同的chzn-select-deselect選項。所以，我修改了這樣的腳本：

$('#filter_list_dropdwn option:not(:selected)').live('click', function() { 
    unselected = $(this); 

    var parent_id = $(unselected).attr("value"); 
    $('#filter_list_dropdwn option[parent_id=' + parent_id + ']').each(function (i, selected) { 
     $(this).attr('selected', false).chosen(); 
    }); 
}); 

$('#filter_list_dropdwn option:selected').live('click', function() { 
    selected = $(this); 
    var parent_id = $(selected).attr("value"); 
    $('#filter_list_dropdwn option[parent_id=' + parent_id + ']').each(function (i, selected) { 
     $(this).attr('selected', true).chosen(); 
    }); 
}); 

但它沒有按預期工作。任何人都可以建議我在chzn-select-deselect下拉菜單中應用相同的自動多選選項時出了什麼問題？

Answer 1

有一個快速瀏覽一下author website，你會看到你有以下事件時，選擇的變化：

$("#form_field").chosen().change(…); 

，並更新選擇下拉列表中，你所要做的：

$("#form_field").trigger("chosen:updated"); 

現在，你的代碼必須從一開始rewrited：

$('#filter_list_dropdwn').chosen(); // to apply the plugin 

$("#filter_list_dropdwn").chosen().change(function(e, option){ 
    // when changing, option will contain {selected: "value"} or {deselected: "value"} 
    var selected = option.selected; 
    var deselected = option.deselected; 

    if (selected !== undefined) { 
     // if we have selected a new option 
     $('#filter_list_dropdwn option[data-parent_id=' + selected + ']').each(function() { 
      $(this).prop('selected', true); 
     }); 
    } else if(deselected !== undefined) { 
     // if we have deselected an option 
     $('#filter_list_dropdwn option[data-parent_id=' + deselected + ']').each(function() { 
      $(this).prop('selected', false); 
     }); 
    } 
    // redraw the "chosen select" when all changes have been made to the real one 
    $("#filter_list_dropdwn").trigger("chosen:updated"); 
}); 

Demo jsFiddle

編輯：

代碼可以是短得多：

$("#filter_list_dropdwn").chosen().change(function(e, option){ 
    var parent_id = option.selected !== undefined ? option.selected : option.deselected; 

    $('#filter_list_dropdwn option[data-parent_id=' + parent_id + ']').each(function() { 
     $(this).prop('selected', option.selected !== undefined ? true : false); 
    }); 

    $("#filter_list_dropdwn").trigger("chosen:updated"); 
}); 

Demo jsFiddle

編輯＃2：

遞歸執行：

Final demo jsFiddle