Link to home
Start Free TrialLog in
Avatar of Isaac
IsaacFlag for United States of America

asked on

cascading drop down now clearing

I have implemented a cascading drop-down with two drop down boxes and it works.  The problem is that the drop downs don't clear out when a new selection is made, so it grows with current and previous values.  I think it's because my array does not clear out.  I tried doing used.length=0 but that did not work.

Any help would be appreciated.


<tr>
                <td>Priority</td>
                <td>
                                <select id="priority">
                                </select>
                </td>
  </tr>
<tr>
                <td>Station</td>
                <td>
                                <select id="station">
                                </select>
                </td>
  </tr>

$(document).ready(function() {                
                                                      
         fillDropDown('Project Module');
                     
});


function fillDropDown(list, stVal) {

                if (list == "Project Module") {
                                //The internal name for 'priority' is 'field13'
                                var endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbyTitle('Project Module')/items?$select=field13";
                }else{
                                if (stVal.length == 1) {
                                                stVal = "0"+stVal;
                                }
                                var endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbyTitle('Stations')/items?$select=Title&$filter=priority eq '"+stVal+"'";
                }
                console.log(endPointUrl);
                var headers = { 
                                "accept": "application/json;odata=verbose" 
                }
                
                jQuery.ajax({ 
                                url: endPointUrl, 
                                type: "GET", 
                                headers: headers, 
                success: function (data) {
                console.log(data);
                                                appendOption(data.d.results,list);
                }, 
                                error: function (err) { 
                                alert("Error Occured:" + JSON.stringify(err)); 
                }
                
});


}


function appendOption(dataOption,listName){
                                
                                if (listName == "Project Module"){
                                                var priority = document.getElementById("priority");
                                }else{                   
                                                var station = document.getElementById("station");
                                }
                                console.log(priority);
                                var used = [];
                                var i=0;

                                dataOption.forEach(function(item) {

                                if (listName == "Project Module"){
                                                if (used.indexOf(item.field13) == -1) {
                                                                var option = document.createElement('option');
                                                
                                                                option.value = item.field13;
                                                                option.innerHTML = item.field13;
                                                                i++;
                                                                
                                                                priority.appendChild(option);
                                                                used.push(item.field13);
                                                                }
                                }else if (listName == "Stations"){
                                                                var option = document.createElement('option');
                                                
                                                                option.value = item.Title;
                                                                option.innerHTML = item.Title;
                                                                i++;
                                                                
                                                                station.appendChild(option);
                                                                used.push(item.Title);

                                }
                });
}


function passToStation(theSel) {
       fillDropDown('Stations',theSel.value);
}

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of HainKurt
HainKurt
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Isaac

ASKER

This worked and was sufficient for what I needed.
// do this before start
$("#station").empty();

This just created duplicates.  So I left it out.
// do this in loop
$("#station").append(new Option(item.Title, item.Title));
Avatar of Isaac

ASKER

Thanks!