<script type = "text/javascript" >
{
var mycategory = [];
mycategory[0] = [
["chocos", "55", "20", " choco chips"],
["Mylo", "60", "10", "hot drinks"]
];
mycategory[1] = [
["chocos", "55", "20", " choco chips"],
["Mylo", "60", "10", "hot drinks"],
["milky bar", "70", "22", "chocolate"]
];
mycategory[2] = [
["milky bar", "70", "22", "chocolate"]
];
function myfunction(value)
{
var category = value.category;
var table = document.getElementById("tab");
for (var i = 0; i < table.length; i++)
var row = table.insertRow(table.length);
{
for (var j = 0; i < table.length; j++)
{
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
}
}
}
}
</script><html>
<body>
<form>
<h2> Product category: </h2>
<select id="demo" onchange="myfunction(this)">
<option value="Category1" >Category1</option>
<option value="Category2">Category2</option>
<option value="Category3">Category3</option>
<option value="None">None</option>
</select>
</form>
<h3>JavaScript Arrays</h3>
<div>
<table border="4" id="tab">
<tr>
<th>Product name </th>
<th> unit </th>
<th> safety stock </th>
<th> Product Category </th>
</tr>
</table>
</div>
</body>
</html>
when I select category 1 i wanted 3 rows to be filled likewise for 2 i want two rows and for 3 i want one row JAVASCRIPT ：我有一个包含三个类别的数组。当我选择一个类别时，该类别中的项目必须显示在表格中。当我单击类别1时，必须填充两行，当我单击catgory 2时，必须填充三行，当我单击类别3时，必须填充一行。
