Javascript 如何使用数组通过另一个Dropdownlist显示Dropdownlist
对不起，我问了一个愚蠢的问题。但我缺乏这方面的知识。有人能帮我吗 我的大男孩要求我用HTML做网站，不仅不用数据库，而且他要我制作产品页面来展示产品。产品不多 我有两个输入可供选择。 1.产品风格 2.产品列表取决于产品的样式 =>当我们选择样式时，产品列表将作为条件列出Javascript 如何使用数组通过另一个Dropdownlist显示Dropdownlist,javascript,magento,drop-down-menu,Javascript,Magento,Drop Down Menu,对不起，我问了一个愚蠢的问题。但我缺乏这方面的知识。有人能帮我吗 我的大男孩要求我用HTML做网站，不仅不用数据库，而且他要我制作产品页面来展示产品。产品不多 我有两个输入可供选择。 1.产品风格 2.产品列表取决于产品的样式 =>当我们选择样式时，产品列表将作为条件列出 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SelectBoxOptions</title>
<script type="text/javascript">
var arrayStyle = ["AAAAAAAAAA","BBBBBBBBBB","CCCCCCCCCC","DDDDDDDDDD","EEEEEEEEEE"];
var arrayProduct_0 = ["No Data"];
var arrayProduct_1 = ["1111111111","1222222222","1333333333","1444444444"];
var arrayProduct_2 = ["2111111111","2222222222","2333333333","2444444444"];
var arrayProduct_3 = ["3111111111","3222222222","3333333333","3444444444"];
var arrayProduct_4 = ["4111111111","4222222222","4333333333","4444444444"];
window.onload = function createElement()
{
var style = document.getElementById("pro_style");
for (var i = 0; i < arrayStyle.length; i++)
{
var option = document.createElement("option");
option.setAttribute("value",[i]);
option.text = arrayStyle[i];
style.appendChild(option);
}
}
function changeProbyStyle(id)
{
var aaa = id;
//alert(aaa);
switch (id)
{
case "0":
//alert("So 0");
return setPro(arrayProduct_0);
break;
case "1":
//alert("So 1");
return setPro(arrayProduct_1);
break;
case "2":
//alert("So 2");
return setPro(arrayProduct_2);
break;
case "3":
//alert("So 3");
return setPro(arrayProduct_3);
break;
case "4":
//alert("So 4");
return setPro(arrayProduct_4);
break;
}
}
function setPro(arr)
{
bbb=arr;
//alert(bbb);
var name = document.getElementById("pro_name");
for (var i = 0; i < arr.length; i++)
{
var option = document.createElement("option");
option.setAttribute("value",[i]);
option.text = arr[i];
name.appendChild(option);
}
}
</script>
</head>
<body>
<form class="wrapper-dropdown">
<h2>Product Style</h2>
<select id="pro_style" onChange="changeProbyStyle(this.value);">
</select>
<h2>Product Name</h2>
<select id="pro_name">
</select>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SelectBoxOptions</title>
<script type="text/javascript">
var arrayStyle = ["AAAAAAAAAA","BBBBBBBBBB","CCCCCCCCCC","DDDDDDDDDD","EEEEEEEEEE"];
var arrayProduct_0 = ["No Data"];
var arrayProduct_1 = ["1111111111","1222222222","1333333333","1444444444"];
var arrayProduct_2 = ["2111111111","2222222222","2333333333","2444444444"];
var arrayProduct_3 = ["3111111111","3222222222","3333333333","3444444444"];
var arrayProduct_4 = ["4111111111","4222222222","4333333333","4444444444"];
window.onload = function createElement()
{
var style = document.getElementById("pro_style");
for (var i = 0; i < arrayStyle.length; i++)
{
var option = document.createElement("option");
option.setAttribute("value",[i]);
option.text = arrayStyle[i];
style.appendChild(option);
}
}
function changeProbyStyle(id)
{
var aaa = id;
//alert(aaa);
switch (id)
{
case "0":
//alert("So 0");
return setPro(arrayProduct_0);
break;
case "1":
//alert("So 1");
return setPro(arrayProduct_1);
break;
case "2":
//alert("So 2");
return setPro(arrayProduct_2);
break;
case "3":
//alert("So 3");
return setPro(arrayProduct_3);
break;
case "4":
//alert("So 4");
return setPro(arrayProduct_4);
break;
}
}
function setPro(arr)
{
function removeOptions(selectbox)
{
var i;
for(i=selectbox.options.length-1;i>=0;i--)
{
selectbox.remove(i);
}
}
//using the function:
removeOptions(document.getElementById("pro_name"));
bbb=arr;
//alert(bbb);
var name = document.getElementById("pro_name");
for (var i = 0; i < arr.length; i++)
{
var option = document.createElement("option");
option.setAttribute("value",[i]);
option.text = arr[i];
name.appendChild(option);
}
}
</script>
</head>
<body>
<form class="wrapper-dropdown">
<h2>Product Style</h2>
<select id="pro_style" onChange="changeProbyStyle(this.value);">
</select>
<h2>Product Name</h2>
<select id="pro_name">
</select>
</form>
</body>
</html>
我已为文档编辑了此条目。希望我的愚蠢问题能有所帮助……这与您的标签php和asp.net有关吗？对不起，我弄错了！！！在你的setPro。。。函数在添加新元素之前，需要清除该元素。请在此处查看此链接：请将您的答案添加为答案，不要将其放入问题中。然后将其标记为已接受。这不是它的工作方式。请在下面输入您的答案，或删除问题。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SelectBoxOptions</title>
<script type="text/javascript">
var arrayStyle = ["AAAAAAAAAA","BBBBBBBBBB","CCCCCCCCCC","DDDDDDDDDD","EEEEEEEEEE"];
var arrayProduct_0 = ["No Data"];
var arrayProduct_1 = ["1111111111","1222222222","1333333333","1444444444"];
var arrayProduct_2 = ["2111111111","2222222222","2333333333","2444444444"];
var arrayProduct_3 = ["3111111111","3222222222","3333333333","3444444444"];
var arrayProduct_4 = ["4111111111","4222222222","4333333333","4444444444"];
window.onload = function createElement()
{
var style = document.getElementById("pro_style");
for (var i = 0; i < arrayStyle.length; i++)
{
var option = document.createElement("option");
option.setAttribute("value",[i]);
option.text = arrayStyle[i];
style.appendChild(option);
}
}
function changeProbyStyle(id)
{
var aaa = id;
//alert(aaa);
switch (id)
{
case "0":
//alert("So 0");
return setPro(arrayProduct_0);
break;
case "1":
//alert("So 1");
return setPro(arrayProduct_1);
break;
case "2":
//alert("So 2");
return setPro(arrayProduct_2);
break;
case "3":
//alert("So 3");
return setPro(arrayProduct_3);
break;
case "4":
//alert("So 4");
return setPro(arrayProduct_4);
break;
}
}
function setPro(arr)
{
function removeOptions(selectbox)
{
var i;
for(i=selectbox.options.length-1;i>=0;i--)
{
selectbox.remove(i);
}
}
//using the function:
removeOptions(document.getElementById("pro_name"));
bbb=arr;
//alert(bbb);
var name = document.getElementById("pro_name");
for (var i = 0; i < arr.length; i++)
{
var option = document.createElement("option");
option.setAttribute("value",[i]);
option.text = arr[i];
name.appendChild(option);
}
}
</script>
</head>
<body>
<form class="wrapper-dropdown">
<h2>Product Style</h2>
<select id="pro_style" onChange="changeProbyStyle(this.value);">
</select>
<h2>Product Name</h2>
<select id="pro_name">
</select>
</form>
</body>
</html>