我如何从一个 <li> 下拉菜单是php用JavaScript还是jquery生成了第二个li菜单？

Question

I create a drop down menu with a foreach cycle querying the db .

Now i would like that when i choose a subitem from the menu via javascript get the value and with a ajax request take all the values that are in the sub-menu for the item choses in the first menu and returned to javascript or jquery that append in the html in a second li section separated.

the first menu was genereated by a table area, the second menu it is generated by a table room this is the structure:

area alpha  -->  room 1, room 2, room 3
area beta -->    room 4, room 5
area gamma  -->   romm6 room 7

...

The following code was not so successful!

THe main problem are:

1) retrieving the data from li tag area 2) the ajax query that have to get the rooms, in an array maybe 3) append the rooms in a second li tag room in html for showing the rooms javascript and jquery code:

function chooseroomajax(id_box, id, db){

         var content=$('#'+id_box).val();
         var requestaj = $.ajax({
              type: "POST",
              url: "ajaxsave.php?action=select_room",
              data: "id="+ id +"&db=" + db +"&content=" + content +"&field=" + id_box,
              success: function(msg){
                   //alert( "select a: "+id_box+" runs good" );
              }
         });

        requestaj.done(function(data) {
            alert(data);

        for (var i = 0; i <= data.lenght; i++){

                $("#room").after( ' </br><a class="avatar"><img id ="fotopaz" src= "http://185.17.106.207:9997/crm/foto/'+ data+'" alt="no foto" width="90" height="90" align="left" title="Controlla" /></a></br></br></br>');


        }   

        });



    }





function chooseroom() {  


  //This way We Can get data from the li tag between ul
   $("#reparto li").click(function() {
  //alert(this.id); // id of clicked li by directly accessing DOMElement property
  //alert($(this).attr('id')); // jQuery's .attr() method, same but more verbose
  //alert($(this).html()); // gets innerHTML of clicked li
  alert($(this).text()); // gets text contents of clicked li
    var area2 = $(this).attr('id');
    });
   chooseromeajax(area2, "", "crmappdb");

}

HTML PHP code:

<li id ="liarea" class="dropdown" " >

   <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> Area<b   class="caret"></b></a>

   <ul id = "area" class="dropdown-menu">
    <?php

      foreach($db->query("SELECT * FROM area ") as $row) {
    ?>

       <li id = "<?php echo $row['idarea']; ?>" onclick ="chooseroom()" > 
        <?php echo $row['descrizione'];    
   ?>
       </li>
    <?php
      }
   ?>
   </ul>
</li>

    <li id = "room">

    </li>
</li>

ajaxsave.php:

if ($_REQUEST['action']=='select_room'){

$db=$_REQUEST['db'];
$campo=$_REQUEST['field'];  
$contenuto=$_REQUEST['content'];
$id=$_REQUEST['id'];  

$db = new PDO('mysql:host=localhost;dbname=crmappdb;charset=utf8', 'root', '', array(PDO::ATTR_EMULATE_PREPARES => false, 
                                                                                                PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));


foreach($db->query("SELECT * FROM area WHERE descr = $field") as $row) {
   $idarea = $row['idarea'];

}


foreach($db->query("SELECT * FROM room WHERE area = $idarea") as $row) {
   $idroom = $row['idroom'];

}   
if (isset($idstanza)){

}else{
    $idroom = "no rooms";
}

echo $field ;



}

Answer 1

What you're asking for is called "cascading dropdowns" and there are many open-source implementations for it. One example is this jQuery plugin:

http://www.dnasir.com/github/jquery-cascading-dropdown/demo.html

Answer 2

I think it easier if you using SELECT tag since it can control it event by onChange.

for your case, just create 2 dropdown one with generated php list and another one that will be generated by js and just should leave it blank for now

<div class="dropdown">
    <button>...</button>
    <ul id="liarea">
    <!-- generated li here -->
    </ul>
</div>
<div class="dropdown">
    <button>...</button>
    <ul id="room"></ul> <!-- empty list -->
</div>

Then on js, just do click event using jquery. in your code right now you are using inline javascript on each list then call another click event inside that function.

$('#liarea').on('click', 'li', function(){
    // ajax call and append the #room list
});
$('#room').on('click', 'li', function(){
    // any function you want to
});

Check this jsfiddle