Changing dropdown list values using Ajax and PHP [duplicate]

This question already has answers here: Closed 11 years ago.

Possible Duplicate:

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


   开发者_如何学C // 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.

---

If you're using jquery, the simplest way to do this would be:

$('#dropdown1').change(function() {
    value = $('#dropdown1').val();
    $.get(ajax.php, { 'value': value }, function(data){
        $('#dropdown2').empty();
        $('#dropdown2').append(data);
    });
});

and data which ajax.php returns would be a string containing all the option values, eg.

$data = '<option value="1">option1</option><option value="2">option2</option><option value="3">option3</option>';
echo $data;

You can also use getJSON to return an array of option values and populate the dropdown menu by iterating through the returned data array. Whichever works.

Anyway, simplified example. Hopefully it helps you!

EDIT: to clarify, the $data string which ajax.php returns will be created based on the value you sent with the request. You can access it in the ajax.php by using $_GET['value'].

---

If you just need some help with Ajax syntax for creating select lists here's some code I just grabbed out of a library I wrote a while ago. I haven't done much JS lately but just in case it helps. (Throw away calls like syn.Debug since those are calls to other methods in my library and you won't have those).

//==============================================================================
// Create a Select element that is composed of sequential numbers
// @param numDesired - the number of options the select area should have
//==============================================================================
syn.CreateSelectSequential = function(numDesired, startValue)
{
var the_select = document.createElement("select");
for(var i=0 ; i < numDesired; ++i)
{
    var the_option = new Option(i+startValue, i+startValue); //display , value both set to i
    the_select.options[i]=the_option;
}   
return the_select;
}; 



//==============================================================================
// Creates an XHTML <select> element  from the passed array of properties, 
// @param optionList an array of value and display properties 
// @returns a fully valid select element from the DOM
//==============================================================================
syn.CreateSelect = function(optionList)
{
try
{
    var the_select = document.createElement("select");
    for (var i = 0 ; i< optionList.length; ++i)
    {      
        var the_option = new Option(optionList[i].display, optionList[i].value);
        //if (i == 3) the_option.disabled = true;
        the_select.options[i]=the_option;

        //The following method worked for FireFox but not for IE    
        //        var the_option = document.createElement("option");
        //         the_option.value = optionList[i].value;
        //         the_option.text = optionList[i].display;
        //         the_select.appendChild(the_option);
    }
    return the_select;
}
catch (exception)
{
    syn.Debug("syn.CreateSelect: "+exception.message);
}
};