'重新选择'选择取决于其他选择(jQuery)

时间:2015-04-23 11:53:57

标签: jquery arrays json

我用json数据填充了我的选择下拉列表。选择的内容取决于选择的选择和之前的无线电。可以重置'当我决定选择另一个单选按钮时,所有选择?

我使用以下代码:

function changeCustomerType(value) {
    selectedCustomerType = value;

    if(typeof dateTypeCol === 'undefined') {
        dateTypeCol = temp[value];
        console.log(dateTypeCol);
    } else {
        dateTypeCol = '';
        yearCol = '';
        console.log(yearCol);
        dateTypeCol = temp[value];
        console.log(dateTypeCol);
    }
}

function changeDateType(value) {
    console.log(selectedCustomerType);
    $(dateFieldset).show();
    yearLabel.show();
    selectedDateType = value;

    switch(selectedDateType) {
    case 'Weekend':
        $(yearSelect).selectedIndex = 0;
        $(monthSelect).hide();
        $(dateSelect).hide();
        break;
    case 'Midweek':
        $(yearSelect).selectedIndex = 0;
        $(monthSelect).hide();
        $(dateSelect).hide();
        break;
    case 'Week':
        $(yearSelect).selectedIndex = 0;
        $(monthSelect).hide();
        $(dateSelect).hide();
        break
    }

    if(typeof yearCol !== 'undefined') {
        yearCol = '';
        $(yearSelect).empty();

        yearCol = dateTypeCol[value];
        console.log(yearCol);

        $.each(yearCol, function(key, value) {
            $(yearSelect).append('<option value=' + value + '>' + key + '</option>');
        });
    } else {
        yearCol = '';
        $(yearSelect).empty();

        yearCol = dateTypeCol[value];
        console.log(yearCol);

        $(yearSelect).append('<option value></option>');
        $.each(yearCol, function(key, value) {
            $(yearSelect).append('<option value=' + value + '>' + key + '</option>');
        });
    }

}

function getMonths(year) {
    selectedYear = year;
    $(dateSelect).hide();
    $(monthSelect).show();

    if(typeof monthCol === 'undefined') {
        monthCol = yearCol[year];
        console.log(monthCol);

        $.each(monthCol, function(key, value) {
            $(monthSelect).append('<option value=' + value + '>' + key + '</option>');
        });
    } else {
        monthCol = '';
        $(monthSelect).empty();

        monthCol = yearCol[year];
        console.log(monthCol);

        $(monthSelect).append('<option value></option>');
        $.each(monthCol, function(key, value) {
            $(monthSelect).append('<option value=' + value + '>' + key + '</option>');
        });
    }
}

function getDates(month) {

    switch(selectedDateType) {
    case 'Weekend':
        $(dateSelect).show();
        break;
    case 'Midweek':
        $(dateSelect).show();
        break;
    case 'Week':
        $(dateSelect).show();
        break
    }

    //console.log(selectedCustomerType, selectedDateType, selectedYear, month);

    if(typeof dateCol === 'undefined') {
        dateCol = monthCol[month];
        console.log(dateCol);

        $.each(dateCol, function(key, value) {
            console.log(value);
            $.each(value, function(key1, value1) {
                if(key1 == 'id') {
                    id = value1;
                };
            });
            $.each(value, function(key2, value2) {
                if(key2 == 'startDate') {
                    $(dateSelect).append('<option value=' + id + '>' + value2 + '</option>');
                };
            });
        });
    } else {
        dateCol = '';
        $(dateSelect).empty();

        $.each(dateCol, function(key, value) {
            console.log(value);
            $.each(value, function(key1, value1) {
                if(key1 == 'id') {
                    id = value1;
                };
            });
            $(monthSelect).append('<option value></option>');
            $.each(value, function(key2, value2) {
                if(key2 == 'startDate') {
                    $(dateSelect).append('<option value=' + id + '>' + value2 + '</option>');
                };
            });
        });
    }
}

现状:

current situation

现在有点混乱,需要在此之后稍微改善它。 如果需要任何其他信息,请询问!新的。 提前谢谢!

1 个答案:

答案 0 :(得分:1)

显然,我可以通过隐藏和显示选择来获得所需的结果 代码仍然有点混乱,但对于遇到相同问题的人,请查看:http://api.jquery.com/hide/

function changeCustomerType(value) {
    selectedCustomerType = value;

    dateTypeRadio.prop('checked', false);
    $(dateFieldset).hide();
    yearLabel.hide();

    if(typeof dateTypeCol === 'undefined') {
        dateTypeCol = temp[value];
        console.log(dateTypeCol);
    } else {
        dateTypeCol = '';
        yearCol = '';
        console.log(yearCol);
        dateTypeCol = temp[value];
        console.log(dateTypeCol);
    }
}

function changeDateType(value) {
    selectedDateType = value;

    $(dateFieldset).hide();
    yearLabel.hide();

    if(typeof(dateTypeCol) == 'undefined'){
        dateTypeRadio.prop('checked', false);
        $(dateFieldset).hide();
        console.log('Selecteer eerst Soort Groep.');
        return;
    } else {
        $(dateFieldset).show();
        console.log('Groepsoort gekozen, geef datumselectie weer..');
    }