0

我有一个类别下拉列表。当用户从下拉列表中选择任何类别时，将出现第二个下拉列表。它将显示与类别相关的产品列表（通过 jQuery ajax）。

当用户单击产品下拉列表中的任何条目时，它将重定向到同一页面但带有GET查询..

例如：

page.php?category=3&product=6

当用户在该页面上时，如何自动选择类别下拉列表和产品下拉列表？

  <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;
    });
4

1 回答 1

1

您可以通过以下方式做到这一点；

<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;
    });
于 2012-04-22T13:06:45.987 回答