Action based on select box item

[mdmartiny]

Hello Everyone,

 

I have a select box with my main categories in it. Depending on what is selected by the user in the selection box another selection box will pop up with sub categories.

 

I am not sure how to get it to open the subcategory selection box. I do not want the selection box with the sub categories in it showing at first. It would be after something has been chosen in the category selection box.

[haku]

You have two options:

1) Load all the possible sub-category select elements on page load, setting them all to be hidden, showing the appropriate element when a selection is made from the main category.

2) Only load the main category on page load, and use AJAX to load the sub-category after a selection has been made from the main category.

 

Regardless of which option you use, you will need to set an onchange listener on the main category to watch for a selection. When that listener is fired, you can use one of the two methods I gave above.

[mdmartiny]

I am trying to write the code to do what I want but nothing I am doing is working. Could someone please give me a hand with it.

 

This is what I have written so far.

 

<p>
                        <label for="category">Category:</label><select name="category" id="category">
                            <option selected="selected" disabled="disabled" value="Select a Category">Select a Category......</option>
                            <?php
                            $select_sql = "SELECT * FROM category ORDER BY cat_id";
                            $cat_select = mysql_query($select_sql);

                            while ($row = mysql_fetch_assoc($cat_select)) {
                                echo "<option value=\"" . $row['cat_id'] . "\">" . $row['category'] . "</option>\n  ";
                            }
                            ?>
                        </select>
                    </p>
                    <script>
					var category = $('#category').val();
					var cat_id =$('#category option:selected').data();

					$('#make').change(function(){
						$.post ('includes/sub_functions.php', {category:category, cat_id:cat_id}, function(data) {
							$('#sub_category').html(data)
						});
					});
				</script>
                    <p>
                        <label for='sub_category'>Sub Category:</label><select name='sub_category' id='sub_category'>
                            <option selected="selected" value='Select a Sub Category'>Select a Sub Category......</option>
                        </select>
                    </p>

 

This is the function page

<?php
include('connection.php');
connect();

if(isset($_POST['category'])){
$cat_id = mysql_real_escape_string($_POST['cat_id']);

$sub_sql = "Select * from sub_cat, category where sub_cat.cat_id = category.$cat_id";
    $sub_select = mysql_query($sub_sql);

while ($row = mysql_fetch_assoc($sub_select)) {
         echo "<option value=\"" . $row['sub_cat_id'] . "\">" . $row['sub_cat'] . "</option>\n  ";
                            }
}
?>

[haku]

I'm assuming that when you run this code, smoke comes out of your monitor, is that correct?