Jump to content

How to show column B value based on column A value?


holy24
 Share

Recommended Posts

Hi, I have created a form and when user select the drop-down list in column A, column B will show a drop-down list of values based on column A selection. I have written the code below with only 2 values in column A, however if there is more values in column A, I have to create alot of div id for each value. Can someone please kindly advice how can I simplified the codes? Thanks.

<script type="text/javascript"> function hidefield(){document.getElementById('div1').style.display='none';document.getElementById('div2').style.display='none';} function showfield(name){if (name=='vendor1'){ document.getElementById('div1').style.display='block';}else{ document.getElementById('div1').style.display='none';} if (name=='vendor2'){ document.getElementById('div2').style.display='block';}else{ document.getElementById('div2').style.display='none';}} </script> <html><body onload="hidefield()"> <td> <select name="vendor" onchange="showfield(this.options[this.selectedIndex].value)"> <option value=""></option> <?php $result1=mysql_query("SELECT * FROM vendor"); while ($row1=mysql_fetch_array($result1)){ ?> <option value='<?php echo $row1["vendorname"]; ?>'><?php echo $row1["vendorname"]; ?></option> <?php } ?> </select> </td> <td> <div id="div1"> <select name="product"> <option value=""></option> <?php $result2=mysql_query("SELECT * FROM product WHERE vendor='vendor1'"); while ($row2=mysql_fetch_array($result2)){ ?> <option value='<?php echo $row2["productname"]; ?>'><?php echo $row2["productname"]; ?></option> <?php } ?> </select> </div> <div id="div2"> <select name="product"> <option value=""></option> <?php $result2=mysql_query("SELECT * FROM product WHERE vendor='vendor2'"); while ($row2=mysql_fetch_array($result2)){ ?> <option value='<?php echo $row2["productname"]; ?>'><?php echo $row2["productname"]; ?></option> <?php } ?> </select> </div> </td></body></html>
Link to comment
Share on other sites

This is off the top of my head, since I'm not going to create a mySQL table just to test this out, but something along the lines of this should be what you're looking for:

  <html><head>  <script type="text/javascript">	function hidefield(){	document.getElementById('div1').style.display='none';	document.getElementById('div2').style.display='none';	} 	function showfield(name){	if (name=='vendor1'){	document.getElementById('div1').style.display='block';	}else{	document.getElementById('div1').style.display='none';	} 	if (name=='vendor2'){	document.getElementById('div2').style.display='block';	}else{	document.getElementById('div2').style.display='none';	}	}  </script></head> <body onload="hidefield()">   <table><tr>  <td>	<select name="vendor" onchange="showfield(this.options[this.selected].value)"> <?php$result1=mysql_query("SELECT * FROM vendor");while ($row1=mysql_fetch_array($result1)){  $value = $row1["vendorname"];  $text = $row1["vendorname"];  echo "	  <option value='$value'>$text</option>\n";}?>	</select>  </td>   <td> <?php$total = 13; // <-- change the number to however many entries are in column A// then use a "for..." loop to create the divsfor ($i=1; $i<=$total; $i++) {  $divID = "div" . $i;  $vendor = "vendor" . $i;  echo "	<div id='$divID'>\n";  echo "	  <select name='product'>\n";  $result2=mysql_query("SELECT * FROM product WHERE vendor='$vendor'")  while ($row2=mysql_fetch_array($result2)) {	$text = $row2["productname"];	echo "		<option value='$text'>$text</option>\n";  }  echo "	  </select>\n";  echo "	</div>\n\n";}?>   </td>  </tr></table></body></html>

Link to comment
Share on other sites

  • 2 weeks later...

Hi, I have tried re-writing the codes, but I have no idea how to code inside the showfield part. By default, product field will not be shown and when user click a vendor name, only all the products belong to that vendor will be shown. Can someone please kindly advise? Thanks. Below are the database design and the codes. Database:I created 1 database with 2 tables:1) Table named "vendor" with fields - id (primary key, auto-increment) and vendorname2) Table named "product" with fields - id (primary key, auto-increment), productname, vendorid (this will be the foreign key that link to the id in vendor table to identify the vendor that the product belongs to)

  <script type="text/javascript">function hidefield(){document.getElementById('product').style.display='none';  } function showfield(name){??????  } </script>  <body onload="hidefield()"><td>	<select name="vendor" onchange="showfield(this.options[this.selectedIndex].value)">			<option value=""></option>	<?php			 $result1=mysql_query("SELECT * FROM vendor");				 while ($row1=mysql_fetch_array($result1)){	?>			<option value='<?php echo $row1["vendorname"]; ?>'><?php echo $row1["vendorname"]; ?></option>	<?php } ?>	</select></td> <div id="product">	<?php		   $total=2; //number of vendors		   for ($i=1; $i<=$total; $i++){		   $vendor=$i;	?>		<div id="<?php echo $vendor; ?>">	   <select name="product">			<option value=""></option>	 <?php		 $result2=mysql_query("SELECT * FROM product WHERE vendorid='$vendor'");			 while ($row2=mysql_fetch_array($result2)){	 ?>		  <option value='<?php echo $row2["productname"]; ?>'><?php echo $row2["productname"]; ?></option>	 <?php } ?>	 </select>	</div>	  	  	<?php } ?></div>  </body>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...