Question

I have two <select> one is category and the second is subcategory.

here is the first <select> for category.

<select name="category" size="10">
    <?php foreach($categories->fetch(array('table' => 'categories')) as $category) { ?>
        <option value="<?php echo $category['id']; ?>"><?php echo $category['name']; ?></option>
    <?php } ?>
</select>

now the second <select> i.e subcategory should be hidden initially and when a user click on category <select> based on the value it should populate the value in subcategory.

One way of doing this is via AJAX by passing categoryId as POST Request and getting HTML as response.

however i would like to know if there is any other alternative so that it automatically pass the categoryId value to PHP and unhide the second <select> here is the code of second <select>

<select name="subcategory" size="10">
    <?php foreach($categories->fetch(array('table' => 'subCategories', 'categoryId' => $categoryId)) as $subCategory) { ?>
        <option value="1"><?php echo $subCategory['name']; ?></option>
    <?php } ?>
</select>

the only thing i need here is $categoryId to be populated dynamically. is there any way of doing this?

thank you..

Answer 1

Sukumar has probably suggested the best and most intuitive solution to make it appear as if the data is being loaded dynamically to the user.

The other alternative would be to submit the form when the select box is changed. Once the form has been submitted PHP would pick up the ID from the POST array and then re-populate the sub-category select box. This is often used as a fallback in case the user doesn’t have JavaScript enabled.