I am working with a massive table (8 MBytes) that I need to filter using a small JavaScript application.
The process works as follows:
- Countries
- Regions
- Skills
I want the user to select one country, one region, and multiple skills as filters. Based on this information, I aim to display a table with relevant data. My challenge lies in integrating the JavaScript functionality with the HTML content. I am unsure how to dynamically insert information from an array instead of hardcoded values. (Eventually, I will replace arrays with JSON files)
Thank you for your assistance.
var country = [
["Australia", "AU"],
...
["Thailand", "TH"]
];
var skill = [
["AU", "Queensland", "Skill 1"],
["AU", "Queensland", "..."],
["AU", "Queensland", "Skill n"],
["AU", "Western Territory", "Skill 1"],
...
];
function initCountry(){
var CountryValue = "AU";
}
function startup() {
initCountry();
initRegion();
initSkill();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" id="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<link rel="stylesheet" href="cs/jquery.mobile.css" />
<link rel="stylesheet" href="cs/basis.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile.js"></script>
</head>
<body onload="startup()">
<form id="FilterForm" name="FilterForm">
<label for="select-custom-20">Countries</label>
<select name="select-custom-20" id="select-custom-20" data-native-menu="false">
<option value= "AU">Australia</option>
...
<option value= "TH">Thailand</option>
</select>
</div>
<div class="ui-field-contain">
<label for="select-custom-19">Region:</label>
<select name="select-custom-19" id="select-custom-19" multiple="multiple" data-native-menu="false">
<option>Choose options</option>
<option value="1" selected="selected">Average</option>
<option value="2">Region 1</option>
<option value="3">Region 2</option>
<option value="4">...</option>
<option value="5">Region n</option>
</select>
</div>
<div class="ui-field-contain">
<label for="select-custom-19">Skill:</label>
<select name="select-custom-19" id="select-custom-19" multiple="multiple" data-native-menu="false">
<option>Choose options</option>
<option value="A" selected="selected">Average</option>
<option value="1">Skill 1</option>
...
<option value="T">Skill n</option>
</select>
</div>
</form>
<table>
<tr>
<td>
Data depending on the filter
</td>
</tr>
</table>
</body>
</html>