I'm setting up a filter where by there will be two dropdowns (a parent dropdown(A list of topics) and child dropdown(A list of Subjects)). Now whenever you change to a specific topic its corresponding subjects are displayed from a second dropdown where, you can also choose a list of subjects. I cant seem to predefine/ make the values from the child dropdown(a list subjects) because they are auto generated from the javascript code. How can i predefine them(values) of subjects?
The values are just html values that are assigned to html tags such as , Wordpress uses this values to identify taxonomies, such as categories, tags, custom taxonomies. I need to make them manually so as they can match my current values from wordpress. Here's the code i currently have;
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1,shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="/styles.css">
<title>Hello, world!</title>
</head>
<body>
<select name="ofsubject" id="ofsubject" class="postform" onchange="getSelectedValue();">
<option value="0">All Subjects</option>
<option class="level-0" value="108">Pre Literacy</option>
<option class="level-0" value="84">Early Numeracy</option>
<option class="level-0" value="90">Health and Wellbeing</option>
<option class="level-0" value="117">Social Emotional Learning</option>
<option class="level-0" value="88">Fine Motor Skills</option>
<option class="level-0" value="73">Art</option>
</select>
<select name="" id="oftopics" class="postform">
<option value="0">All Topics</option>
<option value="0" id="">Alphabet</option>
<option value="1">Fruits</option>
<option value="2">Animals</option>
<option value="3">Body Parts</option>
<option value="4">Colours</option>
<option value="5">Play-Based Learning</option>
</select>
<script>
function getSelectedValue() {
var selectedValue = document.getElementById("ofsubject").value;
console.log('Selected value is : ' + selectedValue);
var select = document.getElementById("oftopics");
select.options.length = 0;
var opt1 = ['Alphabet', 'Fruits', 'Animals', 'Body Parts', 'Colours', 'Play-Based Learning'];
var opt2 = ['Numbers', 'Shapes', 'Addition', 'Subtraction', 'Size', 'Play-Based Learning'];
var opt3 = ['Personal Hygiene', 'Food Hygiene', 'Healthy Foods', 'Safety', 'Breast Feeding',
'Play-Based Learning'
];
var opt4 = ['Writting', 'Baby Massaging', 'Play-Based Learning'];
var opt5 = ['Emotions', 'Interpersonal Skills', 'Play-Based Learning'];
var opt6 = ['Coloring', 'Drawing', 'Painting'];
var select = document.getElementById("oftopics");
if (selectedValue === '108') {
for (var i = 0; i < opt1.length; i++) {
select.options[select.options.length] = new Option(opt1[i], i, false, false);
}
} else if (selectedValue === '84') {
for (var i = 0; i < opt2.length; i++) {
select.options[select.options.length] = new Option(opt2[i], i, false, false);
}
} else if (selectedValue === '90') {
for (var i = 0; i < opt3.length; i++) {
select.options[select.options.length] = new Option(opt3[i], i, false, false);
}
} else if (selectedValue === '88') {
for (var i = 0; i < opt4.length; i++) {
select.options[select.options.length] = new Option(opt4[i], i, false, false);
}
} else if (selectedValue === '117') {
for (var i = 0; i < opt5.length; i++) {
select.options[select.options.length] = new Option(opt5[i], i, false, false);
}
} else if (selectedValue === '73') {
for (var i = 0; i < opt6.length; i++) {
select.options[select.options.length] = new Option(opt6[i], i, false, false);
}
}
}
</script>
</body>
</html>
For example when you choose Pre Literacy from the Subjects, it automatically generates its topics in the second dropdown which are(Alphabet, Fruits, Animals, Body Parts, Colours, Play-Based Learning) and it also generates values which are (0, 1, 2, 3, 4, 5. 6) respectively, I need to make the vallues manually/ pre-define so as they can match the ones from my wordpress