Cascading Dropdown list using REST, Javascript

Hi i'm trying to force my dropdown's in the newform page of my States list to just show items that are related to a certain field.

i have a Country List with four items  ...Nigeria, England, Scotland and Netherlands

I have a State List with 2 columns ....Title and Country

The country Column is a lookup to the Country List.

I have then created a mainForm list which has 3 fields ...Title,State(Lookup from State List), Country(Lookup form Country List)

On the newform page of the mainForm List i have inserted the javascript code below. with the aim of displaying on the Sate dropdown only items from the Country List with id =1. So at the moment everythin is static , i intend to make it more dynamic that when the Country dropdown value changes the options in the State dropdown reflect those changes.

but at the moment i just want the dropdown to only show options for the Country England. i am assumning that the id for this country is 1. and so i want the State dropdown to have the values related to that country.

The problem i have is that all the options are showing on the dropdown despite the fact that i have updated the new values to the DOM

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" type="text/javascript"></script><script type="text/javascript">


$(document).ready(function(){

   PopulateDropdown();

});

function PopulateDropdown() {

var ParentID = 1;
var requestUri = _spPageContextInfo.webAbsoluteUrl +"/_api/Web/Lists/getByTitle('State')/items?$select=Id,Title,Country/Id&$expand=Country/Id&$filter=Country/Id eq 1";


var options = "";
var child = $("select[Title='State'], select[Title='State Required Field'], select[Title='State possible values']");

        // execute AJAX request
        $.ajax({
            url: requestUri,
            type: "GET",
            headers: { "ACCEPT": "application/json;odata=verbose" },
            success: function (data) {


                var dataResults = data.d.results;
                console.log(dataResults);
                console.log(select);
                 for (index in dataResults)
                    {
                        options += "<option value='"+ dataResults[index].Id +"'>"+
                            dataResults[index].Title+"</option>";

                            console.log(dataResults[index]);
                    }

                    $(child).append(options);
                    console.log(child);



            },
            error: function (data) {
                //failure(data);

            }
        });



}

</script>