How to get dropdown based on another dropdown MVC(VB.Net)

Question

I went through this tutorial and converted it for my VB.Net use,

 

https://www.c-sharpcorner.com/UploadFile/4d9083/creating-simple-cascading-dropdownlist-in-mvc-4-using-razor/

 

However, I get an error  [object Object], I have tried all i could to debug but no headway, am not a javascript fan, i came from webform and never had to write any scripts, Please can anyone help as i am already stock on the project and am over 93% completion! just this dropdown stuff, are there any other alternatives too? Thanks in advance. Here is my code

 

Controller

Public Function PullStates(ByVal id As Integer) As JsonResult

            Dim states = db.States.Where(Function(s) s.CountryCode = id).[Select](Function(s) New With
           {
            Key .Text = s.Descrip,
            Key .Value = s.Code
            })
            Return Json(New SelectList(states, "Value", "Text"))

        End Function

'GET: Region/Create
        Function Create() As ActionResult
            ViewBag.Code = "AUTO"


            ViewBag.Country = db.Countries.[Select](Function(c) New SelectListItem With
            {
                .Text = c.Descrip,
                .Value = c.CountryCode
            })


            Return View()
        End Function

View

@Html.DropDownList("Country", CType(ViewBag.Country, IEnumerable(Of SelectListItem)), "--Select Country--", htmlAttributes:=New With {.class = "tb8"})

@Html.DropDownList("State", New SelectList(String.Empty, "Value", "Text"), "--Please Select State--", htmlAttributes:=New With {.class = "tb8"})

Script

<script src="~/Scripts/ddl/jquery-1.7.1.js" type="text/javascript"></script>
<script src="~/Scripts/ddl/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
        //Dropdownlist Selectedchange event
        $("#Country").change(function () {
            $("#State").empty();
            $.ajax({
                type: 'POST',
                url: '@Url.Action("PullStates")', // we are calling json method
                dataType: 'json',
                data: { id: $("#Country").val() },
                success: function (states) {
                    // states contains the JSON formatted list
                    // of states passed from the controller
                    $.each(states, function (i, state) {
                        $("#State").append('<option value="' + state.Value + '">' + state.Text + '</option>');
                    }); // here we are adding option for States
                },
                error: function (ex) {
                    alert('Failed to retrieve states.' + ex);
                }
            });
            return false;
        })
    });
</script>