0

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!

1

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

}
|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.