select lis menu echo - php

Question

i have a 2 types of select list menus:
<select name="category">
<option>----Select----</option>
<option>Category 1</option>
<option>Category 2</option>
<option>Category 3</option>
<option>Category 4</option>
</select>
<select name="category_product">
<option>----Select----</option>
<option>Product of category 1</option>
<option>Product of category 1</option>
<option>Product of category 1</option>
<option>Product of category 1</option>
</select>
What i liked to to is when i choose "Category 1" of the select list menu, it echos the select list menu "category_product", how can i do this?
I was thinking in put the category_product list menu in a variable, and when i chose a category it echo´s the category_products list menu, but i dont no how to make this detect when the category is chosen.
Hope for some help

Answer 1

Your only way is doing this with JS or jQuery, here is en example doing it with JS,
function showProducts(cat){
document.getElementById(cat).style.display = 'block';
}
<select name="category" onchange="showProducts(this.value)">
<option>----Select----</option>
<option value="category_product">Category 1</option>
<option>Category 2</option>
<option>Category 3</option>
<option>Category 4</option>
</select>
<select style="display:none" id="category_product" name="category_product">
<option>----Select----</option>
<option>Product of category 1</option>
<option>Product of category 1</option>
<option>Product of category 1</option>
<option>Product of category 1</option>
</select>
Or another option what you have to make an AJAX call if you want the result should be straight from the database.
UPDATE:
Use this function instead of the above,
function showProducts(cat){
for(var i=1;i<document.getElementsByTagName('select').length;i++){
document.getElementsByTagName('select')[i].style.display = 'none';
};
document.getElementById(cat).style.display = 'block';
}
You can play around with it let me know for any further help.