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

我有3个下拉列表和一些值。我正在使用JavaScript预先填充第一个下拉列表

基于第一个下拉列表中的选定值，如何填充其余两个下拉列表中的值（使用纯javascript）

我使用

函数getURL

在3个下拉列表中基于用户选择的值构建URL，但无法在URL中捕获预加的产品名称。为什么它将

ProductName

的值显示为

未定义的


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>

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>


变量PRODUCTNAME映射={
“ProductA:[{“版本”：“1.0.0”，“文件名”：“FileA1.zip”，“文件名”：“FileA11.dmg”}，{“版本”：“1.0.1”，“文件名”：“FileA2.zip”，“文件名”：“FileA22.dmg”}]，
“ProductB”：[{“版本”：“3.5.0”，“文件名”：“FileB1.zip”，“文件名”：“FileB11.dmg”}，{“版本”：“4.0.1”，“文件名”：“FileB2.zip”，“文件名”：“FileB21.dmg”}]，
“ProductC:[{”version:“1.0.0”，“fileName:“FileC1.zip”，“fileName:“FileC11.dmg”}，{”version:“1.0.1”，“fileName:“FileC2.zip”，“fileName:“FileC21.dmg”}]
};
函数PrepopulateProductName（）
{
var ProductNameselect=document.getElementById（'selProductName'）；
var i=1；
用于（ProductNameMap中的selProductName）{
ProductNameselect.options[i++]=新选项（selProductName）
}
}
函数changeProductName（productNameID）
{
//需要填充所选产品的版本下拉列表
}
函数changeProductVersion（productVersionID）
{
//需要填充所选ProductVersion的文件名下拉列表
}
函数getURL（）{
变量url=”http://abc.def.com";
变量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=“下载链接：”；
document.getElementById（“myAnchor”）.innerHTML=url；
document.getElementById（“myAnchor”）.href=url；
document.getElementById（“myAnchor”）.target=“\u blank”；
}

HTML:

<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>

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>

产品名称：
--选择产品名称--
产品版本：
文件名：
获取URL


循环查看产品名称的详细信息数组以获取版本

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”]}]
};
函数PrepopulateProductName（）{
var ProductNameselect=document.getElementById（'selProductName'）；
var i=1；
用于（ProductNameMap中的变量selProductName）{
ProductNameselect.options[i++]=新选项（selProductName）
}
}
函数changeProductName（productNameID）{
var versionSelect=document.getElementById（'selProductVersion'）；
versionSelect.innerHTML='--选择产品版本'；//删除以前的选项
var fileSelect=document.getElementById（'selFileName'）；
fileSelect.innerHTML='--选择文件名'；//删除以前的选项
var versions=ProductNameMap[productNameID]；
对于（变量i=0；i
产品名称：
--选择产品名称--

产品版本：

文件名：
FYI，您不需要
onXXX
属性中的
javascript:
前缀。这仅在包含URL的属性（例如
href
）中需要，而不是脚本。谢谢您的回答。有时可以有多个
文件名。我更新了我的数据
ProductNameMap
，只使用了几个多文件名实例。我尝试了与您的答案类似的
功能更改ProductVersion
，以显示所选
产品版本的相应
文件名
。但它不起作用。用我尝试过的函数更新了上面的代码段。要显示文件名，我在
函数changeProductVersion
中缺少了什么？正如您在编辑中所显示的，对象不能具有具有具有相同键的多个属性。您应该使
filename
成为所有文件名的数组。然后，您可以在
changeProductVersion
中使用类似于
changeProductName
中的
for
循环。但是如何为每个特定的
产品和版本关联我的
文件名
数组呢。因为可以有多个
产品
具有相同的
版本
如
ProductA
和
ProductC
。感谢您的解释和回答。成功了。但是我在html中添加了一个按钮，使用
函数getURL
根据用户在3个下拉列表中选择的值来框定URL，但无法在URL中捕获预先添加的产品名称。为什么它显示v