asked on

How to create dropdown automatically

Hi,

I have created a table and displaying the contents via php code.

--
-- Table structure for table `personal`
--

CREATE TABLE IF NOT EXISTS `personal` (
  `id` int(11) NOT NULL,
  `name` char(20) NOT NULL,
  `contact` bigint(20) NOT NULL,
  `address` varchar(40) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Open in new window

<html>
<head>
<style>
body
{
background-color:#d0e4fe;
}
h1
{
color:black;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>
<body>




<center>
<table width="50%" border="1" cellspacing="0" cellpadding="0">
 <tr>
 		    <td width="30%"><h2><center><b>Name</b></center></h2></td>
 		    <td width="30%"><h2><center><b>Contact</b></center></h2></td>
 		    <td width="40%"><h2><center><b>Address</b></center></h2></td>
</tr>
<?php
    include('config.php');
    $sql="SELECT * FROM personal ";
    $query = mysql_query($sql);
    $numrows=mysql_numrows($query);
 $row=0;

		  while($row<$numrows)
 {

 $name=mysql_result($query,$row,"name");
 $contact=mysql_result($query,$row,"contact");
 $address=mysql_result($query,$row,"address");
 echo "<tr><td><center>$name</center></td><td><center>$contact</center></td><td><center>$address</center></td></tr>";
 $row++;//increase by 1;
 }
echo "</table>";
?>
</body>
</html>

Open in new window

I got the whole table data in the above code. But i dont want that .What i am trying to do here is .

In the top center i need a dropdown with two options say : Type1 and type2.

When user select type1 it need to generate another dropdown with name "Please choose name" and when user select type2 it need to generate 2 dropdown with name "please choose name" and "Please choose address".

Please choose name should have values from the table column name.
Please choose address should have values from the table column address.
eg: select distinct(name) from personal.

I just want them to load in the same page and provide o/p.

Thanks

Rikin Shah

Hi,

Create a drop down:
textnode2=document.createElement("select");

Add options in it:
var op=new option();
op.value=1;
op.text="First entry";
textnode2.options.ass(op);

magento

ASKER

Sorry , i dont understand.

Sar1973

I suggest to insert by default in the HTML code all the 3 dropdowns and make visible the other 2 with the "onchange" event depending on the choice of the user (say combo "type" has 3 choices: "(Choose), Type1, Type2".

function showCombos() {
	
	var myComboType = document.getElementsByName("type")[0];
	var myComboName = document.getElementsByName("name")[0];
	var myComboAddress = document.getElementByName("address")[0];
	var myComboTypeSel=myComboType.selectedIndex;

	Select Case myComboTypeSel
	Case 0
		myComboName.style.display=='none';
		myComboAddress .style.display=='none';
	Case 1
		myComboName.style.display=='inline';
		myComboAddress .style.display=='none';
  	Case 2
		myComboName.style.display=='inline';
		myComboAddress .style.display=='inline';
	Case Else
	End Select

}

Open in new window

magento

ASKER

Sar1973,

Can you please provide some explanations of your code.

I understand inline means it will show and none it wont show.

For on change event , how to pass that case status values to the below?

<select id="category" name="category"  onChange='showcombos()'>
    <option value="none">Select type</option>
    <option value="Type1">Type1</option>
    <option value="Type2">Type2</option>
 </select>

Open in new window

Sar1973

It should work since it refers to the selected index of the type combo: so if the user chooses "Type 1" the sel.index (and the Case) is 1, if it goes back to "Select an option (or Slecet type as you called it)" the Case 0 is taken. One thing I've missed is "=" instead of "==" since in each single cases you have a command and not a test (so change ....style.display=='inline' to ...style.display='inline').

magento

ASKER

Sar1973,

Seems i missing something its not working.. Please check.

<!DOCTYPE html>
<html>
<head>
<script>
function showCombos() {
	
	var myComboType = document.getElementsByName("type")[0];
	var myComboName = document.getElementsByName("name")[0];
	var myComboAddress = document.getElementByName("address")[0];
	var myComboTypeSel=myComboType.selectedIndex;

	Select Case myComboTypeSel
	Case 0
		myComboName.style.display='none';
		myComboAddress.style.display='none';
	Case 1
		myComboName.style.display='inline';
		myComboAddress.style.display='none';
  	Case 2
		myComboName.style.display='inline';
		myComboAddress.style.display='inline';
	Case Else
	End Select

}

</script>
<head>
<body>

<select id="type" name="type" onChange='showcombos()'>
    <option value="0">Select type</option>
    <option value="1">Type1</option>
    <option value="2">Type2</option>

 </select>

<br>

<select id="name" name="name">
    
    <option value="name">name</option>

 </select>

<select id="address" name="address">
    
    <option value="address">address</option>

 </select>

</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Sar1973

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Sar1973

See also this question for adding/removing options.
https://www.experts-exchange.com/questions/27919935/Dropdown-list-connections.html?anchorAnswerId=39062245#a39062245

magento

ASKER

Hi Sar1973,

I gone thru the post.

Can you explain what the below code does? (this.value)

onchange="myIDChange(this.value)

Also how to create multidimension array using sql . In the above example you have used the values directly .

Suppose that table has N no of rows how you will use that sql to achieve it? Any snippets of code will help understand the logic.

Thanks very much for your help so far.

Sar1973

The post is JS only, not SQL: I won't help with that.

magento

ASKER

Thanks so much .