Question

目前，我根据用户选择隐藏/取消隐藏某些选择下拉列表。要做到这一点，我不得不重复很多代码。我看不到更简单的方法，但我不禁觉得这对于它的需求非常臃肿。

$('#NumOfchildren').change(function () {
    var numOfChildren = $(this).val();
    if (numOfChildren == 0 || numOfChildren == 'child5plus') {
        $("#child1").hide();
        $('select[name="child1"]>option:eq(0)').prop('selected', true);
        $("#child2").hide();
        $('select[name="child2"]>option:eq(0)').prop('selected', true);
        $("#child3").hide();
        $('select[name="child3"]>option:eq(0)').prop('selected', true);
        $("#child4").hide();
        $('select[name="child4"]>option:eq(0)').prop('selected', true);
        if (numOfChildren != 'child5plus') {
            $("#child5plus").hide();
        } else {
            $("#child5plus").show();
        }
    }
    if (numOfChildren > 0) {
        $("#child1").show();
        $("#child2").hide();
        $('select[name="child2"]>option:eq(0)').prop('selected', true);
        $("#child3").hide();
        $('select[name="child3"]>option:eq(0)').prop('selected', true);
        $("#child4").hide();
        $('select[name="child4"]>option:eq(0)').prop('selected', true);
        $("#child5plus").hide();
    }
    if (numOfChildren > 1) {
        $("#child1").show();
        $("#child2").show();
        $("#child3").hide();
        $('select[name="child3"]>option:eq(0)').prop('selected', true);
        $("#child4").hide();
        $('select[name="child4"]>option:eq(0)').prop('selected', true);
        $("#child5plus").hide();
    }
    if (numOfChildren > 2) {
        $("#child1").show();
        $("#child2").show();
        $("#child3").show();
        $("#child4").hide();
        $('select[name="child4"]>option:eq(0)').prop('selected', true);
        $("#child5plus").hide();
    }
    if (numOfChildren > 3) {
        $("#child1").show();
        $("#child2").show();
        $("#child3").show();
        $("#child4").show();
        $("#child5plus").hide();
    }
});

Answer 1

以下是我的尝试：

$('#NumOfchildren').change(function () {
    var numOfChildren = $(this).val();
    $(".child-age").hide().find('select option:first').prop('selected', true);
    if (numOfChildren === 'child5plus') {
        $("#child5plus").show();
    } else if (numOfChildren) {
        for (var i = 1; i <= numOfChildren; i++) {
            $("#child" + i).show();
        }
    }
});

http://jsfiddle.net/csicky/LstNS/55/

Answer 2

我试了一下，试图减少代码重复。 Bascialy我为每个子编号添加了一个属性（在div标签上，其中有一个用户输入孩子年龄的选择框）。然后用它来评估要显示的元素：

// Display child age select boxes matching users child amount
$('.child-age').filter(function () {
    return $(this).attr("data-childs") <= numOfChildren;
}).show();

// Hide others and reset any age user has entered
$('.child-age').filter(function () {
    return $(this).attr("data-childs") > numOfChildren;
}).hide().find('option:eq(0)').prop('selected', true);

Full JSFiddle

http://jsfiddle.net/LstNS/51/

Answer 3

第一个块可以大大简化：

http://jsfiddle.net/isherwood/LstNS/49

if (numOfChildren == 0 || numOfChildren == 'child5plus') {
    $('.child-age').hide().find('select > option:eq(0)').prop('selected', true);

    if (numOfChildren == 'child5plus') {
        $("#child5plus").show();
    }
}

其他街区可以进行类似的重构。

Answer 4

这是使用循环消除重复功能然后将其提取到单独函数中的一种方法。这是你工作的一个很好的起点。我相信你需要做的就是设置'selected'属性。

http://jsfiddle.net/LstNS/40/

$('#NumOfchildren').change(function () {
    var numOfChildren = $(this).val();

    if (numOfChildren == 'child5plus') {
        $("#child5plus").show();    
    } else {
        showNumSelects(numOfChildren);
    }
});

var showNumSelects = function(numChildren){
    $('.child-age').hide();
    for(i = 0; i <= numChildren; i++){
        elemName = "#child" + i;
        $(elemName).show();
    }
}

基于选择隐藏/取消隐藏四个项目的更有效方式

4 个答案: