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


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.


<script type="text/javascript">

function addInput(){
	var tbl = document.getElementById('tblAddress');
	var lastRow = tbl.rows.length;
	var row = tbl.rows[lastRow-1].cloneNode(true);

function getParent(obj, parentType){
	while (obj.parentNode){
		if (obj.nodeName.toUpperCase()==parentType){
  	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

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;
		selbox.options[selbox.options.length] = new Option('C1_V1_Product','C1_V1_Product');

		selbox.options[selbox.options.length] = new Option('C1_V2_Product','C1_V2_Product');
		selbox.options[selbox.options.length] = new Option('C2_V1_Product','C2_V1_Product');

		selbox.options[selbox.options.length] = new Option('C2_V2_Product','C2_V2_Product');


<form name="form" method="post" action="" id="myform">			
		<table border="1" id="tblAddress">
				<td align="center"><b>Category</b></td>
				<td align="center"><b>Vendor</b></td>
				<td align="center"><b>Product Description</b></td>
				<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>
				<td width="7%">
					<select name="vendor[]" onchange="showfield1(this.options[this.selectedIndex].value)">
						<option value=""></option>						
				<td width="15%">
					<select name="product[]">
						<option value=""></option>
				<td width="1%"><input type="button" value="Remove" onclick="removeInput(this);"></td>

<input type="button" value="Add" onclick="addInput();">