How to dynamically create two dropdown box with php and ajax

Pls kindly help me solve this problem. Basically, I want to create two drop down menus that communicate with each other. The first drop down menu will include US states. After the user selects a state, I want the cities in the other menu to show up. How would i go about doing this (using html, css, php, and/or javascript). I have been having problem with the $_get (svalue). it is giving error Notice: Undefined index: svalue in C:\xampp\htdocs\online\ajax-getvalues.php on line 82. Any help will be greatly appreciated.

my table look like this table-delcity

city_id  |  cityname  |  svalue
_____________________________________
1        |   Lagos    |  texas
____________________________________
2        |   Abuja    |  Fct
_____________________________________
3        |   Niger    |  mali

and my code

<?php
$connection = mysqli_connect("localhost", "apple", "applebed", "gilmorewines");

//$selectvalue = mysql_real_escape_string($connection, $_GET['svalue']);
    $selectvalue= mysql_real_escape_string( $_GET['svalue'],$connection );



mysqli_select_db($connection, "gilmorewines");
$result = mysqli_query($connection, "SELECT cityname  FROM delcity WHERE 'svalue'='$selectvalue' ")or die(mysql_error());

echo '<option value="">Please select...</option>';
while($row = mysqli_fetch_array($result))
  {
    echo '<option value="'.$row['cityname'].'">' . $row['cityname'] . "</option>";
    //echo $row['drink_type'] ."<br/>";
  }

mysqli_free_result($result);
mysqli_close($connection);



?>

Ajax script

$(document).ready(function($) {
  var list_target_id = 'list-target'; //first select list ID
  var list_select_id = 'list-select'; //second select list ID
  var initial_target_html = '<option value="">Please select a colour...</option>'; //Initial prompt for target select

  $('#'+list_target_id).html(initial_target_html); //Give the target select the prompt option

  $('#'+list_select_id).change(function(e) {
    //Grab the chosen value on first select list change
    var selectvalue = $(this).val();

    //Display 'loading' status in the target select list
    $('#'+list_target_id).html('<option value="">Loading...</option>');

    if (selectvalue == "") {
        //Display initial prompt in target select if blank value selected
       $('#'+list_target_id).html(initial_target_html);
    } else {
      //Make AJAX request, using the selected value as the GET
      $.ajax({url: 'ajax-getvalues.php?svalue='+selectvalue,
             success: function(output) {
                //alert(output);
                $('#'+list_target_id).html(output);
            },
          error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status + " "+ thrownError);
          }});
        }
    });
});
</script>