限制儿童多选择基于jQuery的父母的多个选择

Question

我需要创建一个接口，选择父多重选择时，它会更新子选项的多选。它的目的是父母多重选择可以没有，选择一个或多个选项，并且子元素显示父母双方都拥有的项目（或回退到所有项目）的联合。

采取例如：

• 当选择父1，对于父1所有状态项应该被允许来选择
• 当父1和亲本2被选择所允许之内的所有的状态项两家母公司1和2应该被允许在子元素

要选择在这里寻找四周，做了很多的谷歌搜索我想我走得很近后，但是这种解决方案很遗憾不能完全满足第二个要求。

我可能会接近完全错误的方式，所以我愿意接受建议。

的JS：

$(document).ready(function(){ 

var allOptions = $('#children option').clone(); 

function children_update() { 
    $('#parents > option:selected').each(function() { 
     $('#children').html(allOptions.filter('.option-' + parseInt($(this).val())));  
    }); 
    if(!$('#parents > option:selected').length) { $('#children').html(allOptions); } 
} 

children_update(); 

$('#parents').change(function() { children_update(); }); 
}); 

的HTML

Parents<br /> 
<select multiple name="parents[]" id="parents"> 
<option value="1">parent 1</option> 
<option value="2">parent 2</option> 
<option value="3">parent 3</option> 
</select> 

<br /> 
Children<br /> 
<select multiple name="children[]" id="children"> 
<option value="1" class="option-1">child 1 (1)</option> 
<option value="2" class="option-1 option-2">child 2 (1,2)</option> 
<option value="3" class="option-1 option-2 option-3">child 3 (1,2,3)</option> 
<option value="4" class="option-1 option-2">child 4 (1,2)</option> 
<option value="5" class="option-2">child 5 (2)</option> 
<option value="6" class="option-3">child 6 (3)</option> 
</select> 

感谢

Answer 1

如何改变children_update功能，这...

function children_update() { 
    $("#children option").attr('disabled','true'); //start off with all disabled 
    $('#parents > option:selected').each(function() { 
     var num = $(this).val(); 
     $("#children .option-"+num).attr('disabled','false'); 
    }); 
    if(!$('#parents > option:selected').length){   //if no parents selected 
     $("#children option").attr('disabled','false'); //enable all options 
    } 
} 

如果我的理解问题纠正真的，应该有效。但是，如果你正在做一个更严格的组合事物（比如只显示与父选项的确切组合相匹配的子选项），请随时纠正我。

编辑：

好，这是一个新的解决方案：

function children_update() { 
    $("#children option").attr('disabled','true'); //start off with all disabled 
    var selectors = getSelectors(); 
    $("#children option"+selectors).attr('disabled','false'); 
} 

function getSelectors(){ 
    var parents = $("#parents").val(); 
    var selectors = ""; 
    if (parents){ 
     $.each(parents, function(index, val){ 
      selectors = selectors + ".option-" + val; 
     }); 
    } 
    return selectors; 
}