Question

I have a category dropdown. When user select any category from a dropdown and then second dropdown will appear.. It will show a list of product that is related to a category (via jQuery ajax).

When user click any entry from a product dropdown it will redirect to same page but with the GET query..

For example:

page.php?category=3&product=6

When user on that page, how to auto select the category dropdown and product dropdown?

  <label>Category</label>
     <select id="category">
       <option value="0">Please select a category</option>
        <?php
           $SQL = "SELECT * FROM category";
           $query = mysql_query($SQL);
           while ($cat = mysql_fetch_assoc($query)) {
              echo "<option value='{$cat['id']}'>{$cat['name']}</option>";
             }
         ?>
     </select>
     <select id="product"> </select>

    $("#category").change(function() {
        var category =  $(this).val();
        $('#product').append($("<option></option>").attr("value","0").text("Please Select Product"));
        $.getJSON(host + "/ajax_select_product.php?categoryid=" + category, function(data) {
            $.each (data, function (index, element) {
                $('#product').append($("<option></option>").attr("value",data[index].id).text(data[index].name));
            });
        });
    });

​
    $("#product").change(function() {
        var product = $("#product :selected").val()
        var category =  $("#category :selected").val()
        window.location = "page.php?category=" + category + "?product=" + product;
    });

Answer 1

You can do this with following;

<label>Category</label>
     <select id="category">
       <option value="0">Please select a category</option>
        <?php
        $currentCategory = 0;
        $curretProduct =0;

        if (!empty($_GET['category'])) {
            $currentCategory = $_GET['category'];   
        }

        if (!empty($_GET['product'])) {
            $currentProduct = $_GET['product']; 
        }
           $SQL = "SELECT * FROM category";
           $query = mysql_query($SQL);
           while ($cat = mysql_fetch_assoc($query)) {
              if ($cat['id'] == $currentCategory) {
                echo "<option value='{$cat['id']}' selected=\"selected\">{$cat['name']}</option>";
              } else {
                echo "<option value='{$cat['id']}'>{$cat['name']}</option>";
              }
             }
         ?>
     </select>
     <select id="product"> </select>
    var currentProduct = "<?php echo $currentProduct; ?>";
    $("#category").change(function() {
        var category =  $(this).val();
        $('#product').append($("<option></option>").attr("value","0").text("Please Select Product"));
        $.getJSON(host + "/ajax_select_product.php?categoryid=" + category, function(data) {
            $.each (data, function (index, element) {
                if (data[index].id == currentProduct) {
                    $('#product').append($("<option></option>").attr("value",data[index].id).attr("selected", "selected").text(data[index].name));
                } else {
                    $('#product').append($("<option></option>").attr("value",data[index].id).text(data[index].name));
                }

            });
        });
    });

​
    $("#product").change(function() {
        var product = $("#product :selected").text()
        var category =  $("#category :selected").text()
        window.location = "page.php?category=" + category + "?product=" + product;
    });