[英]How can I populate dropdown values dynamically based on prior selection?
I have 3 dropdowns with some values. 我有3个下拉菜单,其中包含一些值。 I am using JavaScript to pre-populate the first dropdown.
我正在使用JavaScript来预填充第一个下拉列表。
Based on the selected value in 1st dropdown, how can I populate values in the rest 2 dropdowns (using pure javascript)? 根据第1个下拉列表中的选定值,如何在其余2个下拉列表中填充值(使用纯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. 我正在使用
function getURL
在3个下拉列表中基于用户选择的值构建URL,但无法在URL中捕获预填充的产品名称。 Why is it showing the value of ProductName
as undefined
? 为什么将
ProductName
的值显示为undefined
?
Javascript: 使用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: 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>
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. 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.