在php中创建2个相互依赖的下拉菜单

问题描述:

我有这个html显示2下拉。一个是类和第二是子类在php中创建2个相互依赖的下拉菜单

<form action="a_insert_product.php" method="post"> 
    <div class="module_content"> 

     <fieldset> 
      <label>Category</label> 
      <select name="catname"> 
       <?php 
         $sql = "SELECT * FROM category"; 
         $result = mysqli_query($con, $sql); 

         if (mysqli_num_rows($result) > 0) { 
          while($row = mysqli_fetch_assoc($result)) 
           { 
            $catname=$row["catname"]; 
            $catid=$row["id"]; 

       ?> 

       <option value="<? echo $catname.'-'.$catid;?>"><? echo $catname;?></option> 

           <?} 
         }?> 
      </select> 
     </fieldset> 

     <fieldset> 
      <label>Subcategory</label> 
      <select name="subcatname"> 
       <?php 
         $sql = "SELECT * FROM subcategory"; 
         $result = mysqli_query($con, $sql); 

         if (mysqli_num_rows($result) > 0) { 
          while($row = mysqli_fetch_assoc($result)) 
           { 
            $subcatname=$row["subcatname"]; 
            $subcatid=$row["id"]; 

       ?> 

       <option value="<? echo $subcatname.'-'.$subcatid;?>"><? echo $subcatname;?></option> 

           <?} 
         }?> 
      </select> 
     </fieldset> 

     <fieldset> 
      <label>Product Name</label> 
      <textarea rows="2" name="prodname"></textarea> 
     </fieldset> 
    </div> 
    <footer> 
     <div class="submit_link"> 
      <input type="submit" name="submit" value="Submit" class="alt_btn"> 
     </div> 
    </footer> 
</form> 

虽然它工作正常,但我想显示根据到在类别下拉菜单中选择的类别的子类别,我没有关于JavaScript的很多知识。任何人都可以PLZ电话怎么可以做到

则可以使用AJAX,例如,分配一个“id”属性到这两个catname和subcatname下拉菜单做的事:

<select name="catname" id="category-dropdown"> 

<select name="subcatname" id="subcategory-dropdown"> 

然后使用一些AJAX魔法,例如:

<script type="text/javascript"> 
    $("#category-dropdown").change(function() { 
     var selection_value = $(this).val(); 
     $.post("subcategories.php", { category: selection_value }, 
      function(result){ 
       $.each(result, function(index, subcat) { 
         var option_html = "<option>" + subcat.name + "</option>"; 
         $("#subcategory-dropdown").append(option_html); 
       } 
      }, 
     "json"); 
    }); 
</script> 

请注意,这个例子使用jQuery的,所以你必须在使用前将其添加到您的网页。此外,您将需要创建一个PHP页面,它将为您提供子类别的响应,在这种情况下,我使用了JSON,这非常容易使用。

我会做到以下几点:

在第一个下拉菜单,你有一个上更改处理该检查什么在下拉列表中选择。我会将其链接到ajax调用,然后引入正确的数据以允许您填充第二个下拉列表。

谷歌或在这里搜索“JQuery on change”和“jQuery ajax” - 这里有大量的资源。

This is a different approach to same ends