After a fast and loose education in javascript and JSON, I figured it out. Thought I'd share it here in case anyone else needed it.
( document ).ready(function() {
const urld = "json_doc1.json"
let loclist = $('#element_1');
let worksitelist = $('#element_2');
worksitelist.empty();
loclist.empty();
loclist.append($('<option></option>').attr('value', "").text(""));
document.getElementById("li_2").style.visibility = "hidden";
$.getJSON(urld, function (data) {
$.each(data, function (key, entry) {
loclist.append($('<option></option>').attr('value', entry.local).text(entry.local));//'value' is what is sent to database, text is what is displayed on the page
}
)
});
//=====CAPTURE CHANGE TO DROP DOWN #1 and Radio buttons
const url = "json_doc2.json"
$('#element_1,#element_3_1,#element_3_2,#element_3_3,#element_3_4,#element_3_5').change(function() {
var mylist = document.getElementById("element_1");
var mylocal = mylist.options[mylist.selectedIndex].text;
worksitelist.empty();
//=====FUNCTION TO LOAD LIST INTO DROPDOWN #2 BASED ON DROPDOWN #1 SELECTION
if (mylocal != "") {
document.getElementById("li_2").style.visibility = "visible";} else {document.getElementById("li_2").style.visibility = "hidden";}
$.getJSON(url, function (data) {
$.each(data, function (key, entry) {
if (mylocal != entry.local)
{return true;} else {
worksitelist.append($('<option></option>').attr('value', entry.worksite).text(entry.worksite));
}
})
});
//IDENTIFY RADIO BUTTON SELECTION
var positions = document.getElementsByName('element_3');
for(i = 0; i < positions.length; i++) {
if(positions.checked)
var mypos = positions.value;
myposition = pos_text(mypos);
}
if (myposition != "undefined"){
duesCalc(mylocal,myposition);
}
})//END OF CHANGE FUNCTION
//TRANSLATE RADIO BUTTON SELECTION TO TEXT
function pos_text(mypos) {
return mypos==1 ? "Option 1"
: mypos==2 ? "Option 2"
: mypos==3 ? "Option 3"
: mypos==5 ? "Option 4"
: mypos==4 ? "Option 5"
: "undefined";
}
//MATCH DROPDOWN #1 & RADIO BUTTON VALUES, RETURN 3RD VALUE & DISPLAY IN HTML
function duesCalc(mylocal, myposition) {
const url_dues = "json_doc3.json"
$.getJSON(url_dues, function (data) {
$.each(data, function (key, entry) {
if (entry.Local == mylocal && entry.Type == myposition) {
var locDues = entry.Dues;
document.getElementById("locDues").innerHTML = locDues;
}
}
)
});
}
})//END OF MAIN FUNCTION
