> 
> **Possible Duplicate:**  
> 
> [Populating dropdown - PHP Ajax MySQL](https://stackoverflow.com/questions/5332999/populating-dropdown-php-ajax-mysql) 
> 
> 
> 

I have 4 dropdown list elements and they should be combined with each other, its about destinations. the first one should have all destinations and then depending on what the user selects the second dropdown list with have the values(destinations) that are available for the selected city, then the 2 other dropdown lists will have the opposite way of that destination. its something like the form in this web site:
 <http://info.airprishtina.com/content/index.php?id=20&no_cache=1&L=0> (you can see the example in the left side there is a bookig form). I need the ajax script to do this. I will take care of the PHP task.

```
<div class="WraperForForm"> 
<form action="index.php?menu=rezervimet&submenu=rezervo" method="post">

<table  cellspacing="5" cellpadding="0" border="0" >
<tr>
    <td width="100">
        Emri:
    </td>
    <td width="190">
        <input type="text" id="emri" name="emri">
    </td>

    <td width="100">
        Mbiemri:
    </td>
    <td width="190">
        <input type="text" id="mbiemri" name="mbiemri">
    </td>
</tr>
</table>

<table width="300" cellspacing="5" cellpadding="0" border="0" style="float:left;">
<tr>
    <td width="100">
        Prej:
    </td>
    <td>
        <select class="selectDest" name="Prej">
            '.funksionet::directions(1).'
        </select>
    </td>

</tr>
<tr>
    <td width="80">
        Deri:
    </td>
    <td>
        <select class="selectDest" name="Deri">
            '.funksionet::directions(2).'
        </select>
    </td>
</tr>
<tr>
    <td>

            <form name="Data1Drejtim">
            <label for="data1drejtim">Data e nisjes:</label>
    </td>
        <td>
            <input type="text" id="data1drejtim" name="data1drejtim">
            <script language="JavaScript">

    // whole calendar template can be redefined per individual calendar
    var A_CALTPL = {
        \'months\' : [\'Janar\', \'Shkurt\', \'Mars\', \'Prill\', \'Maj\', \'Qershor\', \'Korrik\', \'Gusht\', \'Shtator\', \'Tetor\', \'Nentor\', \'Dhjetor\'],
        \'weekdays\' : [\'Di\', \'He\', \'Ma\', \'Me\', \'Ej\', \'Pr\', \'Sh\'],
        \'yearscroll\': true,
        \'weekstart\': 0,
        \'centyear\'  : 70,
        \'imgpath\' : \'images/\'
    }

    new tcal ({
        // if referenced by ID then form name is not required
        \'controlname\': \'data1drejtim\'
    }, A_CALTPL);
    </script>

    </td>

    </tr>
</table>

<!-- ___________________Return table_____________________________________ -->
<table width="300" cellspacing="5" cellpadding="0" border="0" style="float:left;" id="hideThis" >
<tr>
    <td width="100">
        Prej:
    </td>
    <td>
        <select class="selectDest" name="KthyesePrej" >
                '.funksionet::directions(2).'
        </select>
    </td>
</tr>
<tr>
    <td width="40">
        Deri:
    </td>
    <td>
        <select class="selectDest" name="KthyeseDeri">
            '.funksionet::directions(1).'
        </select>
    </td>

<tr>
    <td>
        <label for="dataKthyese">Data kthyese:</label>
    </td>       

    <td>

            <input type="text" id="dataKthyese" name="dataKthyese">
                <script language="JavaScript">

    // whole calendar template can be redefined per individual calendar
    var A_CALTPL = {
        \'months\' : [\'Janar\', \'Shkurt\', \'Mars\', \'Prill\', \'Maj\', \'Qershor\', \'Korrik\', \'Gusht\', \'Shtator\', \'Tetor\', \'Nentor\', \'Dhjetor\'],
        \'weekdays\' : [\'Di\', \'He\', \'Ma\', \'Me\', \'Ej\', \'Pr\', \'Sh\'],
        \'yearscroll\': true,
        \'weekstart\': 0,
        \'centyear\'  : 70,
        \'imgpath\' : \'images/\'
    }

    new tcal ({
        // if referenced by ID then form name is not required
        \'controlname\': \'dataKthyese\'
    }, A_CALTPL);
    </script>
            </form>
        </td>

</tr>
</table>

<table width="585" cellspacing="0" cellpadding="3" border="0 " style="float:left;">
<tr>
    <td >Persona:</td>
    <td>
        <select>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </td>
</tr>
<tr>
    <td width="100">
        <input type="radio" id="1drejtim" name="drejtimi"  value="një drejtim" onclick="toggleVisibility(\'hideThis\',0)">
        <label for="1drejtim">Një drejtim</label>
    </td>

    <td >
        <input type="radio" id="kthyese" name="drejtimi" checked="checked" value="kthyese"  onclick="toggleVisibility(\'hideThis\',1)">
        <label for="1drejtim">Kthyese</label>
    </td>

    <td>
    <input style="float:right;" type="submit" value="Rezervo" name="rezervo" />
    </td>
</tr>
</table>
</form><!-- end of the reservation form-->
</div>

```

this is part of the code, when I started it I forgot that people will be able to make reservation from cities near them or from abroad, so I made the FROM dropdown only with the domestic cities and the TO dropdown list with foreign cities. anyway I need all this with ajax because I am not good at all with ajax! 

Thank you for your time.