pull down menu problem

Question

mehdighobakhloo 0 Newbie Poster

14 Years Ago

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.

javascript

3 Contributors
7 Replies
225 Views
12 Hours Discussion Span
Latest Post 14 Years Ago Latest Post by vanu

All 7 Replies

noelthefish 5 Light Poster

14 Years Ago

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.

noelthefish 5 Light Poster

14 Years Ago

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.

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.

vanu 0 Newbie Poster · Answer 1 · 2009-05-06T02:09:37+00:00

hi i m having same problem ,do u getting any solution?

vanu 0 Newbie Poster · Answer 2 · 2009-05-06T03:38:20+00:00

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 · Answer 3 · 2009-05-06T03:51:39+00:00

are you using a programming environment like Dreamweaver?

vanu 0 Newbie Poster · Answer 4 · 2009-05-06T03:51:53+00:00

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 · Answer 5 · 2009-05-06T03:52:21+00:00

vanu 0 Newbie Poster

14 Years Ago

yes bt i m working on notepad++

pull down menu problem

Recommended Answers Collapse Answers

All 7 Replies

Recommended Answers