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

Question

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

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

我正在使用function getURL在3个下拉列表中基于用户选择的值构建URL，但无法在URL中捕获预填充的产品名称。 为什么将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属性应该是一个数组，因此每个版本可以有多个文件。

 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>