How to select a column value based on another column value?

JavaScript
1

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.

  1. the onchange effect doesn’t seems working.
  2. 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>&nbsp;</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>