我有一个多选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,则将自动选择其子级。工作脚本是这样的:
$('#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).prop('selected', false).click();
});
});
$('#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).prop('selected', true).click();
});
});
这是上述功能的小提琴: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
下拉列表中应用相同的自动多选选项出了什么问题?
快速浏览作者网站时,选择更改时,您将看到以下事件:
$("#form_field").chosen().change( … );
要更新选择下拉列表,您必须执行以下操作:
$("#form_field").trigger("chosen:updated");
现在,您的代码必须从头开始重写:
$('#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");
});
编辑:
代码可以短得多:
$("#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");
});
编辑#2:
递归实现:
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句