如何根据先前的选择动态填充下拉值？

Question

我有3个下拉列表，其中包含一些值。我使用JavaScript预先填充第一个下拉列表。

根据第一个下拉列表中的选定值，如何在其余2个下拉列表中填充值（使用纯JavaScript）？

我使用function getURL根据3个下拉列表中的用户选择值构建网址，但无法在网址中捕获预先设定的产品名称。为什么它将ProductName的值显示为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

循环浏览产品名称的详细信息数组以获取版本。

filename属性应该是一个数组，因此每个版本可以有多个文件。

＆＃13;

＆＃13;

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();

＆＃13;

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>

＆＃13;

＆＃13;

＆＃13;