Question

I have got it working up to the third select list. But there are 4.

country, source, target and subject.

I am able to select up to the target select list alright, but I can’t make it to the final one, the subject. This is because I don’t know how to complete the missing code for that one.

Here is the script and further below will be the processing one. So it is the ‘subject’ select list that needs to move accordingly to its next to the left:

jQuery(document).ready(function () {
    jQuery("#sel_pais").change(function () {
        //
        var datatosend = 'pais_id=' + jQuery(this).val();
        jQuery.ajax({
            type:'GET',
            url:'includes/getchilds2.php',
            data:datatosend,
            dataType:"json",
            success:function (data) {
                jQuery('#sel_source').find('option').remove().end();
                jQuery('#sel_target').find('option').remove().end();
                jQuery.each(data, function (index, val) {
                    var newopt = '<option value="' + val.key + '">' + val.title + '</option>';
                    jQuery('#sel_source').append(newopt);
                });
                jQuery('#sel_target').append('<option value="-1">Select</option>');

            }

        });
    });
    //////////////////////
    jQuery("#sel_source").change(function () {
        //
        var datatosend = 'id_from=' + jQuery(this).val();
        jQuery.ajax({
            type:'GET',
            url:'includes/getchilds2.php',
            data:datatosend,
            dataType:"json",
            success:function (data) {
                jQuery('#sel_target').find('option').remove().end();
                jQuery.each(data, function (index, val) {
                    var newopt = '<option value="' + val.key + '">' + val.title + '</option>';
                    jQuery('#sel_target').append(newopt);
                });
            }

        });
    });


});

And here is the processing one:

<?php
$con = mysql_connect("localhost", "root", "");
if (!$con) {
    die('Could not connect: ' . mysql_error());
}

mysql_select_db("traducteurs", $con);
//
if (isset($_GET['pais_id'])) {
    $curid = $_GET['pais_id'];
    //  
    $result = mysql_query("SELECT * FROM tabla_from where pais_id=" . $curid);
    if (mysql_num_rows($result) > 0) {
        $op = '[';
        $op .= '{"title":"Select","key":"-1"},';
        while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
            $op .= '{';
            $op .= '"title":"' . $row['from_name'] . '", "key":"' . $row['id_from'] . '"';
            $op .= '},';
        }
        $op = substr($op, 0, -1);
        $op .= ']';
        echo $op;
    }
    else {
        echo '[{"title":"Select","key":"-1"}]';
    }
}
/////////////////////
if (isset($_GET['id_from'])) {
    $curid = $_GET['id_from'];
    //  
    $result = mysql_query("SELECT * FROM tabla_into where id_from=" . $curid);
    if (mysql_num_rows($result) > 0) {
        $op = '[';
        $op .= '{"title":"Select","key":"-1"},';
        while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
            $op .= '{';
            $op .= '"title":"' . $row['into_language'] . '", "key":"' . $row['id_into'] . '"';
            $op .= '},';
        }
        $op = substr($op, 0, -1);
        $op .= ']';
        echo $op;
    }
    else {
        echo '[{"title":"Select","key":"-1"}]';
    }
}
?>

Answer 1

I am using this code to show interdependent list

<select id="sel_pais" name="sel_pais">
<option value="pais_id">values goes here</option>
</select>

<select id="sel_source" name="sel_source">
<option value="">Select</option>
</select>

<select id="sel_target" name="sel_target">
<option value="">select</option>
</select>

<select id="sel_subject" name="sel_subject">
<option value="">select</option>
</select>
//jquery code for source list
$('#sel_pais').change(function() {
  if ($(this).val()!='') {
    $("#sel_source").load("include/getchild2.php",{pais_id: $(this).val()});
  }
});
//code on change of sel_source
$('#sel_source').change(function() {
  if ($(this).val()!='') {
    $("#sel_target").load("include/getchild2.php",{id_from: $(this).val()});
  }
});

$('#sel_target').change(function() {
  if ($(this).val()!='') {
    $("#sel_subject").load("include/getchild2.php",{id_target: $(this).val()});
  }
});

php sample code you can change.. repeat the below code for others.

    if(isset($_REQUEST['pais_id']) && !empty($_REQUEST['pais_id'])) {
    $result = mysql_query("select * from table where id='".$_REQUEST['pais_id']."' "));
    if(mysql_num_rows($result) > 0) {
        echo '<option value="">Select</option>';
        while($row = mysql_fetch_assoc($result)) {              
                echo '<option value="'.$row['id'].'">'.$row['name'].'</option>';
        }
    } else {
        echo '<option value="">Select</option>';
    }
} 

hope this will help you.