JQuery Get all SharePoint sites and subsites and show in dropdown dynamically New / Edit form of List

Sometimes SharePoint CSOM/SPO, get all site and sub-sites Url / Name recursively in new or edit forms that needs to add or update a field value by doing little customization, but that little thing leads to research and some coding more then expected as SharePoint OOB features always needs little customization after client demos. well here I am sharing a code snippet that will fetch all sites and subsites Url or Name and add in a dropdown 

<script type="text/javascript" src="/SiteAssets/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/SiteAssets/jquery.SPServices-2013.01.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    var sitePathColumn="Site Path";
    var url="http://myserver";
    var v="";
      $().SPServices({
                operation: "GetWebCollection",
                webURL: url,
                completefunc: function(xData, status) {
                    $(xData.responseXML).find("Web").each(function() {
                        var weburlvar = $(this).attr("Url").replace(url,"");
                        var titlevar = $(this).attr("Title");
                        v+="<option value='"+weburlvar +"'>"+titlevar +"</option>";
                        $().SPServices({
                            operation: "GetWebCollection",
                            webURL: weburlvar ,
                            completefunc: function(xData, status) {
                            var subsite=1;
                                $(xData.responseXML).find("Web").each(function() {
                                    v+="<option value='"+$(this).attr("Url").replace(url,"")+"'>&nbsp;&nbsp;"+subsite+". " + $(this).attr("Title")+" </option>";
                                    subsite++;
                                });
                            }
                        });
                    });
                }
            });   

var DropDown="<TR><TD width='190' class='ms-formlabel' noWrap vAlign='top'><H3 class='ms-standardheader'><NOBR>"+sitePathColumn;

DropDown+=" <SPAN title='This is a required field.' class=ms-formvalidation> *</SPAN></NOBR></H3></TD><TD class='ms-formbody' vAlign='top'><SPAN><select id='configDropDown' onchange='UpdateField();'>"+v+"</select><BR></SPAN></TD></TR>";
        $("td.ms-formlabel h3 nobr").each(function(index){
            if($(this).text().indexOf('*')>0 && $(this).text().indexOf(sitePathColumn)>-1)
                {   
                    $(this).closest('tr').css('display','none');   
                    $(this).closest('tr').parent().prepend(DropDown);   
                }
            if($(this).text()==sitePathColumn)
                {    $(this).closest('tr').css('display','none');    }
        });           
});
function UpdateField(){
$('input[title="Site Path"]').val($("#configDropDown").val());
GetLists($("#configDropDown").val());
}
function  GetLists(siteUrl){

    var clientContext = new SP.ClientContext(siteUrl);
    var oWebsite = clientContext.get_web();
    var collList = oWebsite.get_lists();

    this.listInfoCollection = clientContext.loadQuery(collList, 'Include(Title, Id)');
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded() {

    var listInfo = '';
    for (var i = 0; i < this.listInfoCollection.length; i++) {
        var oList = this.listInfoCollection[i];
        listInfo += '\nTitle: ' + oList.get_title() + ' ID: ' + oList.get_id().toString();
        alert(oList.get_type());
    }
   // alert(listInfo.toString());
}
function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>

if you have any doubt just use comment section or contact form, I'll reply you soon,