Hi guys, im having a problem. see, i want to have 2 pull down menus that the options in the second one changes according to the first one. but i dont know how to detect and gain the value changes of the first. thank u.
mehdighobakhloo 0 Newbie Poster
noelthefish 5 Light Poster
post your code and then people will sort it out for you quickly.
Normall you would have a value element in the 1st dropdown menu which you would pass to a query to fill the second dropdown.
Depending on how you are setting up the 1st dropdown will depend on how you are setting the value.
vanu 0 Newbie Poster
hi i m having same problem ,do u getting any solution?
noelthefish 5 Light Poster
Ok here goes.
This is the HTML page that you might want to setup. On it I have 2 dropdown boxes. The first one is populated with example data. This data would normally be loaded from a database but it should give you the idea of how the value of the dropdown is loaded and also how to use it to populate the 2nd dropdown box.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="thisdiv">
<select name="firstdropdown" id="firstdropdown" onchange="loadsecond();">
<option value="choice1">choice1</option>
<option value="choice2">choice2</option>
<option value="choice3">choice3</option>
<option value="choice4">choice4</option>
</select>
<select name="seconddropdown" id="seconddropdown">
</select>
</div>
</body>
</html>
<script language="javascript" type="text/javascript">
function getHTTPObject(){
if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest) return new XMLHttpRequest();
else {
alert("Your browser does not support AJAX.");
return null;
}
}
// Change the value of the outputText field}
function setSeconddropdown(){
if(httpObject.readyState == 4){
document.getElementById('seconddropdown').innerHTML = httpObject.responseText;
}
}
function loadsecond(){
httpObject = getHTTPObject();
if (httpObject != null) {
httpObject.open("GET", "seconddropdown.php?firstdropdown=" + document.getElementById('firstdropdown').value, true);
httpObject.send(null);
httpObject.onreadystatechange = function() {setSeconddropdown();}
}
}
</script>You will notice that there is Javascript that will call another program. It is this PHP program that will load the data into the 2nd dropdown. You can replace the PHP code with whatever you would like as normally here you would connect to a database and load the data accordingly.
<?php
$choice = $_GET['firstdropdown'];
if ($choice == 'choice1')
{
$returnvalue = "<option value=\"choice1a\">choice1a</option>";
$returnvalue .= "<option value=\"choice1b\">choice1b</option>";
$returnvalue .= "<option value=\"choice1c\">choice1c</option>";
$returnvalue .= "<option value=\"choice1d\">choice1d</option>";
}
if ($choice == 'choice2')
{
$returnvalue = "<option value=\"choice2a\">choice2a</option>";
$returnvalue .= "<option value=\"choice2b\">choice2b</option>";
$returnvalue .= "<option value=\"choice2c\">choice2c</option>";
$returnvalue .= "<option value=\"choice2d\">choice2d</option>";
}
if ($choice == 'choice3')
{
$returnvalue = "<option value=\"choice3a\">choice3a</option>";
$returnvalue .= "<option value=\"choice3b\">choice3b</option>";
$returnvalue .= "<option value=\"choice3c\">choice3c</option>";
$returnvalue .= "<option value=\"choice3d\">choice3d</option>";
}
if ($choice == 'choice4')
{
$returnvalue = "<option value=\"choice4a\">choice4a</option>";
$returnvalue .= "<option value=\"choice4b\">choice4b</option>";
$returnvalue .= "<option value=\"choice4c\">choice4c</option>";
$returnvalue .= "<option value=\"choice4d\">choice4d</option>";
}
echo $returnvalue;
?>Like I said if anyone is having problems then post your code and I can then return it to you in an example that you would understand better.
vanu 0 Newbie Poster
hi
thanks for help
But i have to aatch a menu with data base ,mean to say when a user click on that menu that its fetch to the data base in php
first we should make a dynamic html for a php function function print_header_menu () {
i m snding u this plz help me to convert this code to dynamic page ,fetch with data base
<?php
$str = <<<MENU
<ul class="menu clearfix" id="menu">
<li><a href="#" class="menulink">Dropdown One</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li>
<a href="#" class="sub">Navigation Item 2</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</li>
<li>
<a href="#" class="sub">Navigation Item 3</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li>
<a href="#" class="sub">Navigation Item 3</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
<li><a href="#">Navigation Item 6</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 4</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</li>
<li><a href="#" class="menulink">Non-Dropdown</a></li>
<li>
<a href="#" class="menulink">Dropdown Two</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li>
<a href="#" class="sub">Navigation Item 2</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" class="menulink">Dropdown Three</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
<li>
<a href="#" class="sub">Navigation Item 6</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 7</a></li>
<li><a href="#">Navigation Item 8</a></li>
<li><a href="#">Navigation Item 9</a></li>
<li><a href="#">Navigation Item 10</a></li>
</ul>
</li>
</ul>
MENU;
function print_header_menu () {
global $str;
echo $str;
}
?>
noelthefish 5 Light Poster
are you using a programming environment like Dreamweaver?
vanu 0 Newbie Poster
hi
thanks for help
But i have to aatch a menu with data base ,mean to say when a user click on that menu that its fetch to the data base in php
first we should make a dynamic html for a php function function print_header_menu () {
i m snding u this plz help me to convert this code to dynamic page ,fetch with data base
<?php
$str = <<<MENU
<ul class="menu clearfix" id="menu">
<li><a href="#" class="menulink">Dropdown One</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li>
<a href="#" class="sub">Navigation Item 2</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</li>
<li>
<a href="#" class="sub">Navigation Item 3</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li>
<a href="#" class="sub">Navigation Item 3</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
<li><a href="#">Navigation Item 6</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 4</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</li>
<li><a href="#" class="menulink">Non-Dropdown</a></li>
<li>
<a href="#" class="menulink">Dropdown Two</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li>
<a href="#" class="sub">Navigation Item 2</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" class="menulink">Dropdown Three</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
<li>
<a href="#" class="sub">Navigation Item 6</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 7</a></li>
<li><a href="#">Navigation Item 8</a></li>
<li><a href="#">Navigation Item 9</a></li>
<li><a href="#">Navigation Item 10</a></li>
</ul>
</li>
</ul>
MENU;
function print_header_menu () {
global $str;
echo $str;
}
?>
vanu 0 Newbie Poster
yes bt i m working on notepad++
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.