Sorry because I ask a stupid question. But I have lacked the knowledge about this. Can someone help me.
My "big boy" ask me to do the website by HTML only (not USE DATABASE), but he want me to make the Product Page to show the product. (Products are not many)
I have 2 inputs to choose. 1. Style of product 2. Product list (depend on Style of product) => when we choose style the list of product will be list as condition.
<!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>
For this example. When I choose List 1 = "BBBBBBBBBB", List 2 will be ["1111111111","1222222222","1333333333","1444444444"] => 4 products
And I chooseList 1 AGAIN = CCCCCCCCCC. List 2 will be ["1111111111","1333333333","2111111111","2222222222","2333333333","2444444444"]; => 6 products
I don't want it be....I want it JUST SHOW 4 products as List 1 was chose. Can anyone help me to solve this.
Thank for all.
SOLUTION Thank for give me the suggestion. I have found and tried much but I don't get it. Now everything is ok. The solution for this is add do function like this to remove by "loop for" for the selectors.
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"));
And my completed code is:
<!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>
I have edited this entry for documents. Hope my stupid question will be help...
