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 ;

}

```