the below given code is the retrival of subsites from a site.i am using two dropdown.in one all the site names are present and by selecting anyone we will get related subsite in another dropdown.i got the subsite related to a site in the 2nd dropdown but the problem is that every time i select a site the related subsites to that site comes in the dropdown along with previous subsites related to previous site.i want that each time i get subsite which is of only related with that site not along with previous result in the dropdown.plz fix my code or approach.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js"></script>
<script>
ExecuteOrDelayUntilScriptLoaded(RetriveSites,"sp.js");
function RetriveSites()
{
$.ajax({
url: "https://fte-teams.cbreglobalinvestors.com/sites/dev/_api/web/webs?$select=Title,Url,ServerRelativeUrl",
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
},
success: function(data) {
var subSiteNames = [];
var subSiteURL=[];
$.each(data.d.results, function(index, item) {
subSiteNames.push(item.Title);
subSiteURL.push(item.Url);
});
console.log(subSiteNames);
console.log(subSiteURL);
var select = document.getElementById("selectSite");
for(var i = 0; i < subSiteNames.length; i++) {
var opt = subSiteNames[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
}
});
}
function siteName(value)
{
alert(value);
var SiteURL="https://fte-teams.cbreglobalinvestors.com/sites/dev/"+value;
alert(SiteURL)
subSiteName(value);
}
function subSiteName(value)
{
alert(value)
$.ajax({
url: "https://fte-teams.cbreglobalinvestors.com/sites/dev/"+value+"/_api/web/webs?$select=Title,Url,ServerRelativeUrl",
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
},
success: function(data) {
var Names = [];
var NamesURL=[];
$.each(data.d.results, function(index, item) {
Names.push(item.Title);
NamesURL.push(item.Url);
});
console.log(Names);
console.log(NamesURL);
var select = document.getElementById("SubSites");
for(var i = 0; i < Names.length; i++) {
var opt = Names[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
}
});
}
</script>
</head>
<body>
SelectSite:<select id="selectSite" onchange="siteName(this.value);">
<option value="ChooseSite">Choose a Site</option>
</select>
<div id="ddlSub">
SelectSubSite:<select id="SubSites">
<option value="2">Choose a SubSite</option>
</select>
</div>