Dynamic 2nd Dropdown-list based on the 1st Dropdown

Question

Ok, so I researched before asking, but they seem to use complicated stuff like cloning(?) what I need is really simple and I can't do it or don't know if its possible to do in php.

I need the 2nd dropdown-list to appear depending on what is currently selected (before submit) in the first dropdown.

Here is my 1st Dropdown:

<select name="category">
<option value="Vitamin">Vitamin</option>
<option value="Supplement">Supplement</option>
<option value="Therapy Machine">Therapy Machine</option>
</select>

Then for example I selected "Vitamin", the second dropdown options should be

<select name="subcategory">
<option value="Vitamin A">VitaminA</option>
<option value="Vitamin B">VitaminB</option>
<option value="Vitamin C">VitaminC</option>
</select>

I tried doing it in php using ifs. I can't almost understand js, but I think there's a simpler way?... help.

EDITED: Here's the code.

<select name="category" id="category">
   <option value="Vitamin" selected>Vitamin</option>
   <option value="Supplement">Supplement</option>
   <option value="Therapy Machine">Therapy Machine</option>
</select>
<select name="subcategory" id="subcategory">
 <optgroup label="Vitamin">
    <option value="Vitamin A">VitaminA</option>
    <option value="Vitamin B">VitaminB</option>
    <option value="Vitamin C">VitaminC</option>
  </optgroup>
  <optgroup id="B" label="Supplement" disabled>
    <option value="Vitamin A">VitaminA</option>
    <option value="Vitamin B">VitaminB</option>
    <option value="Vitamin C">VitaminC</option>
  </optgroup>
  <optgroup id="C" label="Therapy Machine" disabled>
    <option value="Vitamin A">VitaminA</option>
    <option value="Vitamin B">VitaminB</option>
    <option value="Vitamin C">VitaminC</option>
  </optgroup>
 </select>

And the JS
 <script>
 $(document).ready(function(){
 $("#category").on("change",function(){
    var selectedVal=$( "#category option:selected" ).val();
    $("#subcategory > optgroup").attr("disabled","disabled");
    $('#subcategory > optgroup[label="'+selectedVal+'"]').removeAttr("disabled");
 });  
 });
</script>

Answer 1

you can try following code and on Fiddle

<select name="category" id="cateogery">
    <option value="Vitamin" selected>Vitamin</option>
    <option value="Supplement">Supplement</option>
    <option value="Therapy Machine">Therapy Machine</option>
</select>
<select name="subcategory" id="subcategory">
     <optgroup label="Vitamin">
        <option value="Vitamin A">VitaminA</option>
        <option value="Vitamin B">VitaminB</option>
        <option value="Vitamin C">VitaminC</option>
    </optgroup>
    <optgroup id="B" label="Supplement" disabled>
        <option value="Vitamin A">VitaminA</option>
        <option value="Vitamin B">VitaminB</option>
        <option value="Vitamin C">VitaminC</option>
    </optgroup>
    <optgroup id="C" label="Therapy Machine" disabled>
        <option value="Vitamin A">VitaminA</option>
        <option value="Vitamin B">VitaminB</option>
        <option value="Vitamin C">VitaminC</option>
    </optgroup>
</select>

JQUERY

$(document).ready(function(){
    $("#category").on("change",function(){
        var selectedVal=$( "#category option:selected" ).val();
        $("#subcategory > optgroup").attr("disabled","disabled");
        //$("#subcategory > optgroup").hide(); // you can also hide option insted make them just disabled
        $('#subcategory > optgroup[label="'+selectedVal+'"]').removeAttr("disabled");
       // $('#subcategory > optgroup[label="'+selectedVal+'"]').show() 
    });  
});

Answer 2

If it needs to appear without a page refresh then js is your only option, if the page does refresh it's easy in PHP, just create a form and depending on the post data in it create the second select.

With javascript the easiest option is to load all the selects but append a class to it and depending which category is selected hide/show the right selects f.e with jquery

<select name="category" id="category">
    <option value="Vitamin">Vitamin</option>
    <option value="Supplement">Supplement</option>
    <option value="Therapy Machine">Therapy Machine</option>
</select>

<select id="subcategory_Vitamin" class="subcategory">
    <option value="Vitamin A">VitaminA</option>
    <option value="Vitamin B">VitaminB</option>
    <option value="Vitamin C">VitaminC</option>
</select>
<select id="subcategory_Supplement" class="subcategory">
    <option value="Vitamin A">VitaminA</option>
    <option value="Vitamin B">VitaminB</option>
    <option value="Vitamin C">VitaminC</option>
</select>

<script>
$(function() {
    $('#category').change(function() {
          $('.subcategory').hide();
          var v =  $('#category option:selected').val();
          $('#subcategory_' + v).show();
    });
});
</script>