根据其他人填充组合框

时间:2016-11-23 13:46:36

标签: php html

我正在尝试根据另一个组合填充组合框 第一个将显示所有类别,第二个将显示属于它的所有子类别。
我已经看到有两种方法可以使用ajax和jquery来完成它,你能帮助我吗?

$sqlCmd ="SELECT DISTINCT categories.categoryID, categories.categoryName
      FROM categories
      JOIN subcategories
      ON subcategories.categoryID=categories.categoryID
      JOIN languages
      ON categories.languageID = languages.languageID
      WHERE languages.languageID =:lang;
        ";
$prepQuery = $conn ->prepare($sqlCmd);
$prepQuery->bindParam(":lang",$langid, PDO::PARAM_INT);
$prepQuery->execute();
$resultLang= $prepQuery->fetchAll();

SELECT subcategories.subCatID,subcategories.subCatName, categories.categoryID
FROM subcategories
JOIN categories
ON subcategories.categoryID=categories.categoryID
JOIN languages
ON categories.languageID = languages.languageID
WHERE languages.languageID =1
AND categories.categoryID=1;


    <select name="comboCategories" onchange ='<?php echo  "window.location.href='#postanAd.php?comboCategories='"?>'>
        <?php
        //$counter=0;
        foreach ($resultLang as $oneRec)
        {
    echo"<option value=".$oneRec["categoryID"].">".$oneRec["categoryName"]."</option>";             
        }
       ?>
    </select>                      

    <div class="form-group">
       <div class="input-icon">             
           <a> Select a subcategory </a>
               <!-- COMBOBOX ALL SUBCATEGORIES  !-->
       </div>
    </div> 

1 个答案:

答案 0 :(得分:0)

你应该使用AJAX和php来做到这一点。

<script>
   $(document).ready(function() {
   $('select[name="comboCategories"]').on("change", function() {
        var selectVal = $('this').val();

        $.ajax({                                      
          url: 'postanAd.php',                         
          data: "comboCategories="+selectVal,                                                     
          type:'post',
          //dataType: 'json',                
          success: function(data) { 
              for (var i in data) {
                 $('select[name="subcategories"]').append('<option value="">'+data[i]+'</option>');
               }
          }
        });
    });
   });
</script>