文章/答案/技术大牛

发布

社区首页 >问答首页 >基于jquery父级的多选择限制子多选择

问基于jquery父级的多选择限制子多选择
EN

Stack Overflow用户

提问于 2010-10-19 23:30:29

回答 1查看 2K关注 0票数 0

我需要创建一个界面，在选择一个父多个选择时，它会更新一个子的多个选项。它的意图是父多个选择可以没有、一个或多个选项被选中，并且子元素显示双亲都拥有的项的合并(或者返回到所有项)。

举个例子：

当选择父1时，当父1和父2被选中时，应允许选择父1和父2的所有状态项，应允许在子元素中选择父元素1和父元素2中允许的所有状态项。

在这里搜索并做了大量搜索之后，我想我已经接近了，但不幸的是，这个解决方案并没有完全满足第二个需求。

我可能完全走错了路，所以我愿意接受建议。

联合来文：

$(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>

谢谢

jquery

hide

parent-child

show

回答 1

Stack Overflow用户

回答已采纳

发布于 2010-10-19 23:47:39

把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;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/3973639

复制

相似问题

问基于jquery父级的多选择限制子多选择
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于jquery父级的多选择限制子多选择EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于jquery父级的多选择限制子多选择
EN