0

i am working on a module where i have main categories in sidebar in ul and i have one drop down for subcategories. the idea is that when i click on any link in main categories it should show the related subcategories in drop down and when i click on sub category it should show the product details below drop down in list view. i did all this but now looking for ajax to do this for me.

i searched for it but mostly i found drop down for both main and sub categories but i do not need drop down for main categories. send me just an example or any link that have this whole thing rest i will do my home work.

all the record is fetch from database three table that are linked through FK.

thanks in advance for any kind of help.

  <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>

now what i want to do is when page loads it show ist div with main categories and when i click any main cat it update the drop down of sub cat accordingly with ajax and then when subcat loads and i click any of the sub cat it loads the third div accordingly with ajax.

hope it will help now

4

1 回答 1

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 */
        }
    }
}

Ajax.php 将其放在服务器的根目录中

$file = $_GET['page'];

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

Ajax 文件：menu.php，所有的 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，希望那不是问题

于 2013-06-02T22:25:27.977 回答