Dependency between comboboxes in php/jquery

Question

Languages: PHP,JQuery,MySQL

The question is "simple", I have a triple dependency with php and jquerys, the code works great, for inserting new information, but now I would like to make an update, so I need to load the current information first and I don't figure it out how to, I add some parts of the code, if any more parts needed ask me before voting me down please.

Code is something like this:

      <tr>
        <td class="main"><?php echo ENTRY_COUNTRY; ?></td>
        <td class="main">
                    <select id="country" name="country">
                        <option value="0">Select One...</option>
                    </select>
            </td>
      </tr>
      <tr>
        <td class="main"><?php echo ENTRY_STATE; ?></td>
        <td class="main">
                <select id="state" name="state">
                    <option value="0">Select One...</option>
                </select>
        </td>
      </tr>
          <tr>
        <td class="main"><?php echo ENTRY_CITY; ?></td>
        <td class="main">
                <select id="city" name="city">
                    <option value="0">Select One...</option>
                </select>
        </td>
      </tr>

The three are loaded from a db in mysql, by actions like:

<script type="text/javascript">
$(document).ready(function(){
    cargar_paises();
    $("#country").change(function(){dependencia_estado();});
    $("#state").change(function(){dependencia_ciudad();});
    $("#city").change(function(){dependencia_zip();});
    $("#state").attr("disabled",true);
    $("#city").attr("disabled",true);
});

function cargar_paises()
{
    $.get("scripts/cargar-paises.php", function(resultado){
        if(resultado == false)
        {
            alert("Error");
        }
        else
        {
            $('#country').append(resultado);            
        }
    }); 
}
function dependencia_estado()
{
    var code = $("#country").val();
    $.get("scripts/dependencia-estado.php", { code: code },
        function(resultado)
        {
            if(resultado == false)
            {
                alert("No se encontraron provincias para ese pais");
                $("#state").attr("disabled",true);
                document.getElementById("state").options.length=1;
            }
            else
            {
                $("#state").attr("disabled",false);
                document.getElementById("state").options.length=1;
                $('#state').append(resultado);          
            }
        }

    );
}
function dependencia_ciudad()
{
    var code = $("#state").val();
    $.get("scripts/dependencia-ciudades.php?", { code: code }, function(resultado){
        if(resultado == false)
        {
            alert("Error");
        }
        else
        {
            $("#city").attr("disabled",false);
            document.getElementById("city").options.length=1;
            $('#city').append(resultado);           
        }
    });

..... Thanks for everything ;) sorry for the english.

Answer 1

I guess you want something like this:

On the main page:

<script>
document.ready = function() {
    fillBasicInformation();
}
</script>

Now you would have to define a fillBasicInformation function, as follows:

//this should only be called in edit mode
fillBasicInformation = function() {
    //First fill country select
    //select the specific country
    //Fill state select
    //select specific state
    //fill city select
    //select specific city

    //now attach events to onChange event
    //1
}

You have to decide now how you will get and fill your fields, adding options to the appropriate, probabl through ajax, or maybe directly on the page load and selecting the right one (using val(), for example).