Hi,
I have created a triple dependent drop-downlist, however I have a problem if I click on the “Add” button function, there will be 2 errors.
- the onchange effect doesn’t seems working.
- the default option value for vendor and product should be empty (no option value at all), however once I click “Add” all the rows will have same value and the value will not change.
Can someone please kindly help on the below codes? Thanks.
<html>
<head>
<script type="text/javascript">
function addInput(){
var tbl = document.getElementById('tblAddress');
var lastRow = tbl.rows.length;
var row = tbl.rows[lastRow-1].cloneNode(true);
tbl.tBodies[0].appendChild(row);
}
function getParent(obj, parentType){
while (obj.parentNode){
if (obj.nodeName.toUpperCase()==parentType){
break;
}
obj=obj.parentNode;
}
return obj;
}
function removeInput(obj){
var row = getParent(obj, 'TR');
var tbl = getParent(row, 'TABLE');
if(tbl.rows.length > 2) {
// one header row and one mandatory data row
// every row has a rowIndex attribute attached
// simply call the inbuilt deleteRow method by passing the row index
tbl.deleteRow(row.rowIndex);
}
}
function showfield(vname){
var myForm = document.forms.myform;
var selbox1=myForm.elements["vendor[]"];
var selbox2=myForm.elements["product[]"];
selbox1.options.length = 1;
selbox2.options.length = 0;
if (vname == "") {
selbox2.options[selbox2.options.length] = new Option('','');
}
if(vname=="Category 1"){
selbox1.options[selbox1.options.length] = new Option('C1_Vendor1','C1_Vendor1');
selbox1.options[selbox1.options.length] = new Option('C1_Vendor2','C1_Vendor2');
}
if(vname=="Category 2"){
selbox1.options[selbox1.options.length] = new Option('C2_Vendor1','C2_Vendor1');
selbox1.options[selbox1.options.length] = new Option('C2_Vendor2','C2_Vendor2');
}
}
function showfield1(pname){
var myForm = document.forms.myform;
var selbox=myForm.elements["product[]"];
selbox.options.length = 1;
if(pname=="C1_Vendor1"){
selbox.options[selbox.options.length] = new Option('C1_V1_Product','C1_V1_Product');
}
if(pname=="C1_Vendor2"){
selbox.options[selbox.options.length] = new Option('C1_V2_Product','C1_V2_Product');
}
if(pname=="C2_Vendor1"){
selbox.options[selbox.options.length] = new Option('C2_V1_Product','C2_V1_Product');
}
if(pname=="C2_Vendor2"){
selbox.options[selbox.options.length] = new Option('C2_V2_Product','C2_V2_Product');
}
}
</script>
</head>
<body>
<form name="form" method="post" action="" id="myform">
<table border="1" id="tblAddress">
<tr>
<td align="center"><b>Category</b></td>
<td align="center"><b>Vendor</b></td>
<td align="center"><b>Product Description</b></td>
<td> </td>
</tr>
<tr>
<td width="4%">
<select name="category[]" onchange="showfield(this.options[this.selectedIndex].value)">
<option value=""></option>
<option value="Category 1">Category 1</option>
<option value="Category 2">Category 2</option>
</select>
</td>
<td width="7%">
<select name="vendor[]" onchange="showfield1(this.options[this.selectedIndex].value)">
<option value=""></option>
</select>
</td>
<td width="15%">
<select name="product[]">
<option value=""></option>
</select>
</td>
<td width="1%"><input type="button" value="Remove" onclick="removeInput(this);"></td>
</tr>
<table>
<br>
<input type="button" value="Add" onclick="addInput();">
</form>
</body>
</html>