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>