我需要创建一个界面,在选择父多重选择时,它会更新子多选项。父多重选择可以选择无,一个或多个选项,子元素显示父母双方拥有的项目的联合(或回退到所有项目)。
以例如:
在这里搜索并进行了大量的谷歌搜索后,我想我已经接近了,但遗憾的是这个解决方案并不能完全满足第二个要求。
我可能会以完全错误的方式接近这一点,所以我愿意接受建议。
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>
由于
答案 0 :(得分:0)
如何将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;
}