chuk-shirley
6/13/2017 - 2:34 PM

Chained select boxes populated from AJAX results

Chained select boxes populated from AJAX results

index.html
content_copyfile_download
<!DOCTYPE html>
<html class="no-js">
<head></head>
<body>
    
    <!-- Product group select box -->
    <select name="productGroup" data-behavior="productGroup">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    
    <!-- Item code select box -->
    <select name="itemCode" data-behavior="itemCode"></select>    
    
    <script type="text/javascript" src="/bower_components/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="/test-reports/search/SearchTestReports.js"></script>
    <script type="text/javascript">
        $(document).on('change', '[data-behavior="productGroup"]', SearchTestReports.changeProductGroup);
    </script>
</body>
</html>
SearchTestReports.js
content_copyfile_download
var SearchTestReports = (function () {

    var changeProductGroup = function (event) {
        _getItemCodesByProductGroup(event.target.value).done(function (response) {
            // populate item code select box 
        };
    };

    var _getItemCodesByProductGroup = function (productGroup) {
        return $.ajax({
            url: 'inventory/fetch-items-by-product-group',
            dataType: 'json',
            type: 'GET',
            data: {
                productGroupId: productGroup
            }
        });
    };

    return {
        changeProductGroup: changeProductGroup
    };
})();