如何基於JQuery下拉列表值加載頁面

Question

我有一個正在構建的ASPX網頁，用於根據過濾條件生成報告。 我有一個jqxwidget，用於獲取下拉列表，該列表從我創建的var中獲取值：

var sourceRptType = [
            { value: '0', label: 'Hours & Labour Cost By Employee' },
            { value: '1', label: 'Hours & Labour Cost By Project' },
            { value: '2', label: 'Premiums & Allowances By Employee' },
            { value: '3', label: 'Premiums & Allowances By Project' },
            { value: '4', label: 'Daily Labour Costs & Allowances By Employee' },
            { value: '5', label: 'Daily Labour Costs & Allowances - Raw Data' },
            { value: '6', label: 'Daily Labour Costs & Allowances By Employee w/ Premiums' },
            { value: '7', label: 'Daily Labour Costs & Allowances By Employee w/ Allowance Breakout' },
            { value: '8', label: 'Daily Labour Costs & Allowances w/ Premiums - Raw Data' },
        ];

我希望我的按鈕根據上面選擇的值加載網頁。 如何獲得加載所選下拉列表值的按鈕？

Answer 1

您確實共享了HTML輸出或提到了select元素ID，但我想它是report_type ，假設您有一個ID為report_table的表，其中將顯示報告數據。

$('select').first().on( 'change', function() {
    // get the report ID
    var reportID = $(this).val();

    // pass that to your API endpoint or any file to process your request
    // via AJAX
    $.ajax({
        url: 'someFile.asp',
        data: {
            report: reportID
        },
        success: function( response ) {
            // let's suppose your response is in JSON

            // target table
            var table = $('#reports_table');

            // insert the data
            response.each(function( index, row ){
                table.append('<tr><td>' + row.title + '</td></tr>');
                // depends on your data but should not be hard to guess
            })
        }
    })
} );

注意：上面的代碼未經測試，可能會有些錯誤，並且可能會因您的數據和環境而異。

讓我知道是否有幫助以及您是否需要進一步的幫助。