How can I populate dropdown values dynamically based on prior selection?

Question

I have 3 dropdowns with some values. I am using JavaScript to pre-populate the first dropdown.

Based on the selected value in 1st dropdown, how can I populate values in the rest 2 dropdowns (using pure javascript)?

I am framing a URL based on the user selected values in 3 dropdowns using function getURL ,but unable to capture the prepopluated product Name in the URL. Why is it showing the value of ProductName as undefined?

Javascript:

<script>
var ProductNameMap = {
        "ProductA":[{"version":"1.0.0","fileName":"FileA1.zip","fileName":"FileA11.dmg"},{"version":"1.0.1","fileName":"FileA2.zip","fileName":"FileA22.dmg"}],
        "ProductB":[{"version":"3.5.0","fileName":"FileB1.zip","fileName":"FileB11.dmg"},{"version":"4.0.1","fileName":"FileB2.zip","fileName":"FileB21.dmg"}], 
        "ProductC":[{"version":"1.0.0","fileName":"FileC1.zip","fileName":"FileC11.dmg"},{"version":"1.0.1","fileName":"FileC2.zip","fileName":"FileC21.dmg"}]   
};

function PrepopulateProductName()
    {
        var ProductNameselect = document.getElementById('selProductName');
        var i=1;
        for (selProductName in ProductNameMap){
          ProductNameselect.options[i++] = new Option(selProductName)
        }
    }
function changeProductName(productNameID)
    {
      //Need to populate version dropdown of selected Product
}
function changeProductVersion(productVersionID)
    {
 //Need to populate file name dropdown of selected ProductVersion
    }


    function getURL() {

        var url = "http://abc.def.com";
        var pnid = (selProductName  == "") ? "0" : selProductName.value;
        var psid = (selProductVersion.value == "") ? "0" : selProductVersion.value;
        var pfid = (selFileName.value == "") ? "0" : selFileName.value;

        url += "/" + pnid;
        url += "/" + psid;
        url += "/" + pfid;

        document.getElementById("text").innerHTML = "Download Link : ";
        document.getElementById("myAnchor").innerHTML = url;
        document.getElementById("myAnchor").href = url;
        document.getElementById("myAnchor").target = "_blank";
    }

</script>

HTML:

Product Name:
<select id="selProductVersion" name="selProductVersion" 
        onchange="changeProductName(this.value);">
<option>--Choose Product Name--</option>
</select>

Product Version:
    <select id="selProductVersion" name="selProductVersion" 
        onchange="changeProductVersion(this.value);">
    </select>           

File Name:
<select id="selFileName" name="selFileName"></select>

<button onclick="getURL()">Get URL</button>
<p id="text"></p>
<a id="myAnchor"></a>

Answer 1

Loop through the array of details for the product name to get the versions.

The filename property should be an array so you can have multiple files for each version.

var ProductNameMap = {
  "ProductA": [{"version": "1.0.0", "fileName": ["FileA1.zip", "FileA11.zip"]}, {"version": "1.0.1", "fileName": ["FileA2.zip", "FileA22.zip"]}],
  "ProductB": [{"version": "3.5.0", "fileName": ["FileB1.zip", "FileB11.zip"]}, {"version": "4.0.1", "fileName": ["FileB2.zip", "FileB22.zip"]}],
  "ProductC": [{"version": "1.0.0", "fileName": ["FileC1.zip", "FileC11.zip"]}, {"version": "1.0.1", "fileName": ["FileC2.zip", "FileC22.zip"]}]
};

function PrepopulateProductName() {
  var ProductNameselect = document.getElementById('selProductName');
  var i = 1;
  for (var selProductName in ProductNameMap) {
    ProductNameselect.options[i++] = new Option(selProductName)
  }
}

function changeProductName(productNameID) {
  var versionSelect = document.getElementById('selProductVersion');
  versionSelect.innerHTML = '<option>--Choose Product Version</option>'; // Remove previous options
  var fileSelect = document.getElementById('selFileName');
  fileSelect.innerHTML = '<option>--Choose Filename</option>'; // Remove previous options
  var versions = ProductNameMap[productNameID];
  for (var i = 0; i < versions.length; i++) {
    versionSelect.appendChild(new Option(versions[i].version));
  }
}

function changeProductVersion(productVersion) {
  var productNameID = document.getElementById('selProductName').value;
  var fileSelect = document.getElementById('selFileName');
  fileSelect.innerHTML = ''; // Remove previous options
  var versions = ProductNameMap[productNameID];
  for (var i = 0; i < versions.length; i++) {
    if (versions[i].version == productVersion) {
      var filenames = versions[i].fileName;
      for (var j = 0; j < filenames.length; j++) {
        fileSelect.appendChild(new Option(filenames[j]));
      }
      break;
    }
  }
}


PrepopulateProductName();

Product Name:
<select id="selProductName" name="selProductName" onchange="changeProductName(this.value);">
  <option>--Choose Product Name--</option>
</select>
<br>Product Version:
<select id="selProductVersion" name="selProductVersion" onchange="changeProductVersion(this.value);">
</select>
<br>File Name:
<select id="selFileName" name="selFileName"></select>