This project has moved and is read-only. For the latest updates, please go here.

JQuery Empty and Append using SPServices

Nov 19, 2014 at 7:23 PM
Edited Nov 19, 2014 at 7:39 PM
I have a list that houses two columns
 Column A is a Regional list (Region 1, Region 2)
 Column B is a Location list (Location A - F)
I'm using SPServices GetListItem to filter Locations A-F in a drop down list. The other drop down list on the page is the Regional list. When the page loads the location dropdown list is filled with all the list items A - F, when changing the Region list, the location list is using $("#locationlist").empty(); and then #("#locationlist").append to only list the items per that region. I have this working without the empty but it will continue to append the location list. Once I add the empty it will only give me the last item in that region. Code Sample below.
$(document).ready(function() {
    var method = "GetListItems";
    var list = "Branch Locations";
    var Query = "<Query><OrderBy><FieldRef Name='a2c2' Ascending='true' /></OrderBy></Query>";
    var fieldsToRead = "<ViewFields><FieldRef Name='a2c2' /><FieldRef Name='Region_x0020_Number' /></ViewFields>";
            operation: method,
            async: true,
            listName: list,
            CAMLViewFields: fieldsToRead, 
            CAMLQuery: Query,
                completefunc: function(xData, Status) {
                     $(xData.responseXML).SPFilterNode("z:row").each(function() {
                        var Region = $(this).attr('ows_Region_x0020_Number');
                        var LocationName = $(this).attr('ows_a2c2');
                                                $("#locationlist").append("<option value='" + LocationName + "'>" + LocationName + " </option>");
                                                //Region List Change
                        $("#regionlist").change(function () {
                            var regList = document.getElementById("regionlist");
                            var sregListV = regList.options[regList.selectedIndex].value;
                            if(sregListV == 0) {
                                $("#locationlist").append("<option value='" + LocationName + "'>" + LocationName + " </option>");
                            if(Region == sregListV) {
                                $("#locationlist").append("<option value='" + LocationName + "'>" + LocationName + " </option>");

Nov 19, 2014 at 8:29 PM
try changing this
$("#locationlist").append("<option value='" + LocationName + "'>" + LocationName + " </option>");

$("#locationlist").html("<option value='" + LocationName + "'>" + LocationName + " </option>");

i've experienced something similar when using [append]
Nov 19, 2014 at 9:22 PM
Thanks for replying, it still only gives me the last item of the region @sharepointguy12
Nov 19, 2014 at 9:24 PM
I've used this same script in XML with no problem
if(sregListV != "0") {
                    $("#locationlist").empty();                                     //Empty Location List
                    $("#locationlist").append("<option>Select Location for Region " + sregListV + "</option>")
                    $(xml).find('Location').each(function(){                        //Find the Location XML
                        var RegionID = $(this).find('Region').text();                //Find the Region Number
                        if(RegionID == sregListV) {                                 //If Region is equal to the drop down value
                            var LocationName = $(this).find('BranchName').text();
                            $("#locationlist").append("<option value='" + LocationName + "'>" + LocationName + " </option>");
                    });//End Find Location
                }//End If
Nov 20, 2014 at 2:29 PM
Aren't you doing pretty much what the SPCascadeDropdown function does?

Nov 20, 2014 at 5:41 PM
I thought the SPCascadeDropdown function only works with a look up field. There is no look up field just all one list.
Nov 20, 2014 at 5:45 PM
You might want to reconsider your architecture to use lookup columns. It makes managing the available values a lot easier.

Nov 20, 2014 at 6:19 PM
Unfortunately its not my call, the list is generated from a marketing report with the information. It works fine if I dont you empty() it will filter fine it will just append to whats already in the list, but when I add the empty() it will only give me the last item of that filtered list
Nov 20, 2014 at 6:36 PM
OK, I won't argue about that part.

You're attaching to the change event for #regionList every time you go through the
loop. At the very least that will cause unexpected behavior. You should pull that out of the loop.

You're also adding a trailing space to the option values here " </option>");, but that's something that probably hasn't mattered yet.

You should be able to debug through the steps to see what happens to the options as you loop through.