On select, another select option would appear

Question

I have been searching the internet for hours and tried many things, but I can't seem to get anything of it working, so now I want to ask you.

If I have an select form like this

<div class="form-group">
<label for="InputmainCat">Main category</label>
<select name="InputmainCat" class="form-control">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
<option value="4">d</option>
<option value="5">e</option>
</select>
</div>

When my user picks one from the list, then another select should appear, as they first choose the main category, and then the sub category

So if they pick d, then my code gets the value 4, and list all sub categories with parent category 4

FYI: I am a PHP programmer, I have very little knowledge about java/jquery

Thanks

Answer 1

You can use method change(), I don't know your html but if you put your categories into a iv with id category_n where n is the value foreach subcategories

$('.form-control').change(function(){
    var val = $(this).val();
    $('#category_' + val).hide();
});

and your div something like:

<div id="category_1" style="display:none;">
   <ul>
     <li>subcategory 1</li>
     <li>subcategory 2</li>
     <li>subcategory 3</li>
   </ul>
</div>

<div id="category_2" style="display:none;">
   <ul>
     <li>subcategory 4</li>
     <li>subcategory 5</li>
     <li>subcategory 6</li>
   </ul>
</div>