EXPLANATION:
I am working with two elements, each containing a set of options. The first element has options with db-ids as values, acting as parent categories.
The second element is filled with options where the parent db-ids are their values and their own db-ids serve as html id-attributes, representing child categories.
PROBLEM: My goal is to hide all child categories initially, and when a parent category is selected, the corresponding children should become visible based on their value matching that of the parent.
MY ATTEMPTS: To achieve this, I wrote a script which unfortunately is not functioning properly. It adds a click event to each parent category, triggering a function to display the relevant child category if their value matches that of the clicked element.
HTML CODE:
<select multiple name="branch">
<option selected="" value="false">Please Select a Branch</option>
<option class="branch-item" value="0">Computer</option>
<option class="branch-item" value="1">Automobile</option>
<option class="branch-item" value="4">Technical</option>
</select>
<select multiple class="form-option" name="subbranch">
<option class="subbranch-item" style="display: none;" value="1">Software</option>
<option class="subbranch-item" style="display: none;" value="1">Hardware</option>
<option class="subbranch-item" style="display: none;" value="7">Mechanics</option>
<option class="subbranch-item" style="display: none;" value="7">Welding</option>
</select>
JQUERY CODE:
<script type="text/javascript">
$(document).ready(function(e) {
$(".branche-item").click(function(){
var values = $(this).val();
$('.subbranch-item').each(function(element, value) {
if(value == values)
{
element.show();
}
});
});
});
</script>
I would appreciate any assistance in debugging the jQuery code, thank you