How to reference SharePoint list in external website?

Question

I have an external website that is pretty much a form that interfaces with another enterprise software. One of the requirements of the fields in the form is to provide a location. We have the list of locations in our SharePoint, so I want to reference the SharePoint locations in a cascading drop down list on our form.

I am pretty new to referencing SharePoint-related services to external websites, and could really use a jumpstart. I've tried YouTube searching video demonstrations and reading some articles, but could not find my solution. I'm using predominantly HTML/CSS/JS/JQUERY for our external website.

Answer 1

//Assuming Column1 is the parent column in sharepoint list and Column2 is child column
<script type="text/javascript" src="filelink/jquery-1.6.1.min.js"></script>
<script language="javascript" type="text/javascript">
var dropdown1 = document.getElementById('DropDown1');   //get dropdown1 by id
var dropdown2 = document.getElementById('DropDown2');   //get dropdown2 by id
var dropdown1Array=[];
var dropdown2Array=[];    //populate 1st dropdown
var call1 = $.ajax({
        url: "absolute URL" +  "/_api/Web/Lists/GetByTitle('ListName')/Items?$select=column1",
        type: "GET",
        dataType: "json",
        headers: {
            Accept: "application/json;odata=verbose"
        }
    });
    $.when(call1).done(function(data, textStatus, jqXHR) {
        data.d.results.forEach(function(entry) {
            //inserting unique values in dropdown1
            if (dropdownArray1.indexOf(entry.column1) == -1) { 
                dropdownArray1.push(entry.column1);
                //inserting items into dropdown1
                    var child = document.createElement("option");
                    child.textContent = entry.column1;
                    child.value = entry.column1;
                    dropdown1.appendChild(child);
                }
        });
    });
//populate 2nd dropwon in cascaded format
dropdown1.addEventListener("change", function () {
 while (dropdown2.firstChild) {
    dropdown2.removeChild(dropdown2.firstChild);
}
var call2 = $.ajax({
        url: "absolute URL" +  "/_api/Web/Lists/GetByTitle('ListName')/Items?$select=column2&$filter=column1 eq dropdown1.value",
        type: "GET",
        dataType: "json",
        headers: {
            Accept: "application/json;odata=verbose"
        }
    });
    $.when(call2).done(function(data, textStatus, jqXHR) {
        data.d.results.forEach(function(entry) {
            //inserting unique values in dropdown2
            if (dropdownArray2.indexOf(entry.column2) == -1) { 
                dropdownArray2.push(entry.column2);
                //inserting items into dropdown2
                    var child = document.createElement("option");
                    child.textContent = entry.column2;
                    child.value = entry.column2;
                    dropdown2.appendChild(child);
                }
        });
    });
});                 
</script>