Skip to content

Instantly share code, notes, and snippets.

@chukShirley

chukShirley/SearchTestReports.js

Last active June 13, 2017 14:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chukShirley/a6fe14d132fc3004d6a44c54d4190bac to your computer and use it in GitHub Desktop.
Save chukShirley/a6fe14d132fc3004d6a44c54d4190bac to your computer and use it in GitHub Desktop.
Download ZIP
Chained select boxes populated from AJAX results
Raw
index.html
<!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>
Raw
SearchTestReports.js
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
};
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment