当点击主类别时显示子类别，当点击带有ajax的子猫时显示产品

Question

我正在研究一个模块，在ul的侧栏中有主要类别，在子类别中有一个下拉列表。我的想法是，当我单击主类别中的任何链接时，它应该在下拉列表中显示相关的子类别，当我单击子类别时，它应该在列表视图中的下拉列表中显示下面的产品详细信息。我做了所有这些，但现在正在寻找ajax为我做这件事。

我搜索了它，但大多数情况下我都找到了主类别和子类别的下拉列表，但我不需要主类别的下拉列表。发送给我一个例子或任何链接，有这整件事Rest，我会做我的家庭作业。

所有记录都是从通过FK链接的三个数据库表中获取的。

提前感谢您的帮助。

  <div id="main-cat">
    <ul>
       <li></li>
       <li></li>
       <li></li>           
    </ul>
 </div>

<div id="sub-cat">
  <select>
     <option></option>
     <option></option>
     <option></option>
  </select>

  <div id="products">
    <ul>
       <li></li>
       <li></li>
       <li></li>
    </ul>

现在我想做的是，当页面加载时，它会显示带有主要类别的ist div，当我单击任何主类别时，它会使用ajax相应地更新sub cat下拉列表，然后当subcat加载时，我单击任何子类别时，它会使用ajax相应地加载第三个div。

希望现在能有所帮助

Answer 1

我不明白，为什么要用Ajax作为下拉菜单呢？

不管怎样，给你

<div class="menuHolder" id="menuHolder">
      <script type="text/javascript">
            loadMenu();
      </script>
</div>

Ajax函数（.js文件）

function loadMenu( ANY VALUES HERE ) {
    xmlhttp=new XMLHttpRequest();
    xmlhttp.open("GET","/ajax.php?page=menu&key="+value,true);
    xmlhttp.send(null);

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("menuHolder").innerHTML= xmlhttp.responseText;
              /* returns the HTML from the Ajax page into menuHolder div */
        }
    }
}

AJAXphp将其放在服务器的根目录中

$file = $_GET['page'];

if(file_exists('yourpath/ajax/'.$file.'.php')){
    include_once 'yourpath/ajax/'.$file.'.php';
} else {
    print 'File could not be found';
}

Ajax文件：菜单。所有html都将返回给给定的容器

Your code, Values passed with Ajax can be received with $_GET['key']
<div class="menu" id="menu">
      /* code for menu */
</div>
<?
if(isset($_GET['submenu']) { /* if you passed a value for submenu with ajax */
    ?>
    <div class="submenu" id="menu">
        /* code for submenu */
    </div>
    <?
}
?>
 .......

正如你所注意到的，我不太喜欢JQuery，我总是使用纯javascript，希望这不是问题