Dynamic Combo boxes JS or AJAX ??

Question

cVz 19 Junior Poster

15 Years Ago

Hey people ....

I am trying to dynamically load data into combo boxes on selection of the first combo box items...

I am Using MySql and PHP .... i really just don't know what to do anymore ... please please please help me ...

PS - i am actually a C# Developer so web development is new to me

Here's my code, if you want it

<html>
<?php
	//Creating a connection *******************************************************************************************
	$connection = mysql_connect("localhost", "root", "*********");
	
	if (!$connection)
		{
			die("Database connection failed : " .mysql_error() );
		}
	// ****************************************************************************************************************
		
	//Selecting the four databases ************************************************************************************
	$db_Sections = mysql_select_db("ncs_quote_system", $connection);
	
	if (!$db_Sections)
		{
			die("Database selection failed : " .mysql_error() );
		}

	//*****************************************************************************************************************
	
	
?>
<head>
    <script language="javascript">
    function Select_Section()
    {
        var choice = document.formname.Sections.options[document.formname.Sections.selectedIndex].value;
        if(choice == ['Description'])
        {
            document.all['Sub_Categories'].style.display = "none";
            document.all['Categories'].style.display = "";
        }

        else if(choice == ['Description'])
        {
            document.all['Sub_Categories'].style.display = "";
            document.all['Categories'].style.display = "none";
        }

        else
        {
            document.all['Sub_Categories'].style.display = "none";
            document.all['Categories'].style.display = "none";
        }
    }
    
    </script>
</head>
<body>

<form name="formname">
	<?php
		
		echo '<select name="Sections" onchange="Select_Section()">';
			//Selecting table Sections *****************************************************************
			 $Sections = mysql_query("SELECT Description FROM sections", $connection);
				
			if (!$Sections)
				{
					die("Database query failed : " .mysql_error() );
				}
		
			while ($RowSections = mysql_fetch_array($Sections))
				{
					echo '<option value='.$RowSections['Description'].'>'.$RowSections['Description'].'</option>';
				}
				
				echo '</select>';
	?>

<br><br>

<div style="position: absolute; display: none" name="Categories_div" id="Categories_div">
        <?php
		
		echo '<select name="Categories">';
		
		//Selecting table Sub_Categories ******************************************************************
		$Sub_Categories = mysql_query("SELECT Description FROM subcategories, category_subcategory_link																	WHERE subcategories.id = category_subcategory_link.CategoryId ", $connection);
	
		if (!$Sub_Categories)
			{
				die("Database query failed : " .mysql_error() );
			}
		
		while ($RowSubCategories = mysql_fetch_array($Sub_Categories))
		{
			echo '<option value='.$RowSubCategories['Description'].'>'.$RowSubCategories['Description'].'</option>';
		}
		echo '</select>';
		?>
</div>

<div style="position: absolute; display: none" name="Sub_Categories_div" id="Sub_Categories_div">
    <select name="Sub_Categories">
</div>

</form>

</body>
</html>

Cool ... please help me ...

php

2 Contributors
1 Reply
173 Views
1 Day Discussion Span
Latest Post 15 Years Ago Latest Post by digital-ether

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

digital-ether 399 Nearly a Posting Virtuoso Team Colleague · Answer 1 · 2008-09-22T02:18:38+00:00

Hey people ....
I am trying to dynamically load data into combo boxes on selection of the first combo box items...
I am Using MySql and PHP .... i really just don't know what to do anymore ... please please please help me ...
PS - i am actually a C# Developer so web development is new to me
Here's my code, if you want it
Cool ... please help me ...

Hi,

Could you post the HTML source of this, so the JavaScript and HTML elements is more apparent, please?

Where are you stuck?

It looks like you're writing all the data to the page, so you don't need "AJAX". Ajax is only used for remote updates without reloading the page.

This is more a Javascript question, then PHP.

What you want is to use more standardized methods of selecting DOM elements, and manipulating the DOM.
A good reference: http://www.howtocreate.co.uk/tutorials/javascript/domstructure

This is more forward compatible with browsers.

A simple example of dynamic population of a selectbox.

eg:

<script type="text/javascript">
<!--

// lets say PHP wrote this dynamically
var girls = ['mary', 'anna', 'jenny'];
var boys = ['peter', 'joe', 'sam'];

// reference the first selectbox by its id
var sel1 = document.getElementById('statis_selectbox');
// reference the second select box by its id
var sel2 = document.getElementById('dynamic_selectbox');

// add an event handler to be triggered when selection occurs
sel1.onchange = function() {

  // first would be to remove the existing options from second select box
  for(var i = 0; i < sel2.options.length; i++) {
      if (options[i].value != 0)
        options[i].parentNode.removeChild(options[i]);
    }

  // get the selected option's value
  var selected = this.options[this.options.selectedIndex].value;
  // populate the dynamic select box based on selection
  if (selected == 1) {
    for(var i = 0; i < girls.length; i++) {
      var option = document.createElement('option');
      option.value = i;
      option.appendChild(document.createTextNode(girls[i]));
      sel2.appendChild(option);
    }
  } else if (selected == 2) {
    // etc. same as 1 bug for boys
  }
};

//-->
</script>

<select id="static_selectbox">
<option value="0">Select Gender</option>
<option value="1">Girls</option>
<option value="2">Boys</option>
</select>

<select id="dynamic_selectbox">
<option value="0">Select Person</option>
</select>

The part written by PHP is:

// lets say PHP wrote this dynamically
var girls = ['mary', 'anna', 'jenny'];
var boys = ['peter', 'joe', 'sam'];

You could write this out with something like:

<?php
$arr = array('mary', 'anna', 'jenny'); // lets say this was from db
echo 'var girls = "['".implode("', '", $arr)."'];\n";
?>

You could also use JSON, for which PHP libraries exist.

A few things to note:

The document.getElementById() function selects DOM Nodes (HTML Elements) By their ID.

The select box options are contained in sel.options. This is an object that behaves like an array, allowing you to manipulate it as such. Each index is an option.
Each option has the "value" property, as well as DOM methods.

document.createElement() creates a new DOM Node.
document.createTextNode() creates a DOM Text Node.