Cascade drop down lists in SharePoint 2013 using jQuery, REST and AJAX

Question

This is what I have so far:

Loading the States in the State lists:

var ItemStateDD,
    ItemCountyDD,
    ItemIDDD;

$(document).ready(function () {

//state populate
$.ajax({
    cache: false,
    url: "my-url/_api/web/lists/GetByTitle('County')/items?$select=Title,County",
    type: 'GET',
    dataType: 'json',
    async: false,
    headers: {
        "accept": "application/json;odata=verbose;charset=utf-8"
    },
    success: function (data) {
        $.each(data.d.results, function (i, result) {
            ItemStateDD = result.Title,
            ItemCountyDD = result.County,
            ItemIDDD = result.Id;
            $('#stateDD').append("<option value='" + ItemStateDD + "'>" + ItemStateDD + "</option>");
        });
        ////Eliminate duplicates
        var usedStates = {};
        $("#stateDD > option").each(function () {
            if (usedStates[this.value]) {
                $(this).remove();
            } else {
                usedStates[this.value] = this.value;
            }
        });
        ///

    }, //end of success
    error: function ajaxError(response) {
        alert(response.status + ' ' + response.statusText);
    },
    complete: function () {}
}); //end of ajax

$('#stateDD option:selected').on('change', function () {
    populateCounty();
});
});

This part works perfectly and the States are loaded, but I'm having some trouble with the second part of the code:

function populateCounty() {

$.ajax({
    cache: false,
    url: "my-url/_api/web/lists/GetByTitle('County')/items?$select=Title,County&$filter=Title eq '" + ItemStateDD + "'",
    type: 'GET',
    dataType: 'json',
    async: false,
    headers: {
        "accept": "application/json;odata=verbose;charset=utf-8"
    },
    success: function (data) {
        $.each(data.d.results, function (i, result) {
            ItemCountyDD = result.County;
            $('#countyDD').append("<option value='" + ItemCountyDD + "'>" + ItemCountyDD + "</option>");
        });

    }, //end of success
    error: function ajaxError(response) {
        alert(response.status + ' ' + response.statusText);
    },
    complete: function () {}
}); //end of ajax

}

I'm not sure what am I missing here. I don't get any errors at all. Unfortunately I'm not allowed to use SPServices. Thanks!

cubanGuy · Accepted Answer · 2014-11-04 15:12:47Z

The answer to my question was simpler than what I thought.I just added an "onchange" event to the select element itself:

 <select name="stateDD" title="state" id="stateDD" onchange="populateCounty(this.value)">

And then pass the selection as an argument to the ajax function that populates the counties dropdown:

function populateCounty(selectedValue) {
 $('#countyDD option').each(function () {
    if ($(this).val() != '0') {
        $(this).remove();
    }

$.ajax({
cache: false,
url: "my-url/_api/web/lists/GetByTitle('County')/items?$select=Title,County&$filter=Title eq '" + selectedValue + "'",
type: 'GET',
dataType: 'json',
async: false,
headers: {
    "accept": "application/json;odata=verbose;charset=utf-8"
},
success: function (data) {
    $.each(data.d.results, function (i, result) {
        ItemCountyDD = result.County;
        $('#countyDD').append("<option value='" + ItemCountyDD + "'>" + ItemCountyDD + "</option>");
    });

}, //end of success
error: function ajaxError(response) {
    alert(response.status + ' ' + response.statusText);
},

}); //end of ajax

}

Stack Exchange Network

Cascade drop down lists in SharePoint 2013 using jQuery, REST and AJAX

1 Answer 1

Your Answer

Linked

Hot Network Questions

Cascade drop down lists in SharePoint 2013 using jQuery, REST and AJAX

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Hot Network Questions