Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

image onClick change SELECT roll-down OPTIONS

Posted on 2009-07-14
15
Medium Priority
?
299 Views
Last Modified: 2012-05-07
Dear JS Gurus

I have 2 images. One is called "for children" and the other is called "for adults". They look like tabs. Under that is a SELECT input box with a rolldown of categories. The categories are default to adults, when I click on the image "for children" I want the categories to change to another list, then if "for adults" is clicked, I want to change it back to the first list.

How can this be done in Javascript? Here's the options I want below.

Thanks!
<!-- If "for children" is clicked -->
<SELECT NAME="category">
  <OPTION>Clowns</OPTION>
  <OPTION>Facepainters</OPTION>
  <OPTION>Bouncy Castle Hire</OPTION>
</SELECT>
 
<!-- If "for adults" is clicked -->
<SELECT NAME="category">
  <OPTION>Live Bands</OPTION>
  <OPTION>Casino Hire</OPTION>
  <OPTION>Mobile Bar Hire</OPTION>
</SELECT>

Open in new window

0
Comment
Question by:tobzzz
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 7
15 Comments
 
LVL 4

Expert Comment

by:ryangiglio
ID: 24851896
Hi tobzzz,

I would do this with CSS and the display property.

Give each select a unique ID, for example:

<!-- If "for children" is clicked -->
<SELECT NAME="category" id="children" style="display:none">
  <OPTION>Clowns</OPTION>
  <OPTION>Facepainters</OPTION>
  <OPTION>Bouncy Castle Hire</OPTION>
</SELECT>
 
<!-- If "for adults" is clicked -->
<SELECT NAME="category" id="adults" style="display:block">
  <OPTION>Live Bands</OPTION>
  <OPTION>Casino Hire</OPTION>
  <OPTION>Mobile Bar Hire</OPTION>
</SELECT>

Set the adult button to: onclick="changeMenu('adult')"
and the children button to: onclick="changeMenu('children')"

And include this javascript function
function changeMenu(clicked) {
  // If the children button is clicked
  if (clicked == "children") {
    // If children isn't currently being displayed
    if (document.getElementById('children').style.display == "none") {
      // Change it to display block - substitute "block" for whatever CSS style you see fit.
      document.getElementById('children').style.display = "block";
    }
  // Else - the adult button is clicked
  else {
    // If adult isn't currently being displayed
    if (document.getElementById('adult').style.display == "none") {
      // Change it to display block - substitute "block" for whatever CSS style you see fit.
      document.getElementById('adult').style.display = "block";
    }
  }
}

Open in new window

0
 
LVL 11

Author Comment

by:tobzzz
ID: 24852146
Hi ryangiglio

Thanks for advice. I've copied the code into a test doc. The problem is, when I click "children", the adult box is still there. I need to *only* show 1 select box, so essentially the boxes are swapping depending which button you click.

Also, there seems to be a javascript error of some kind running that code. I attach below how I've used your code.
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
	function changeMenu(clicked) {
	  
	  // If the children button is clicked
	  if (clicked == "children") {
	    // If children isn't currently being displayed
	    if (document.getElementById('children').style.display == "none") {
	      // Change it to display block - substitute "block" for whatever CSS style you see fit.
	      document.getElementById('children').style.display = "block";
	    }
	  // Else - the adult button is clicked
	  else {
	    // If adult isn't currently being displayed
	    if (document.getElementById('adult').style.display == "none") {
	      // Change it to display block - substitute "block" for whatever CSS style you see fit.
	      document.getElementById('adult').style.display = "block";
	    }
	  }
	}
	}
</SCRIPT>
</HEAD>
<BODY>
<FORM ACTION="test.asp" METHOD="POST">
<P><input type="button" value="adults" onclick="changeMenu('adult')"></P>
<P><input type="button" value="kids" onclick="changeMenu('children')"></P>
<!-- If "for children" is clicked -->
<SELECT NAME="category" id="children" style="display:none">
  <OPTION>Clowns</OPTION>
  <OPTION>Facepainters</OPTION>
  <OPTION>Bouncy Castle Hire</OPTION>
</SELECT>
<!-- If "for adults" is clicked -->
<SELECT NAME="category" id="adults" style="display:block">
  <OPTION>Live Bands</OPTION>
  <OPTION>Casino Hire</OPTION>
  <OPTION>Mobile Bar Hire</OPTION>
</SELECT>
<P><input type="submit"></P>
</FORM>
/BODY>
</HTML>

Open in new window

0
 
LVL 4

Expert Comment

by:ryangiglio
ID: 24852170
Your closing body tag is broken. that might be causing the error.

My mistake. I forgot to hide the other box as well.  Try this.


function changeMenu(clicked) {
  // If the children button is clicked
  if (clicked == "children") {
    // If children isn't currently being displayed
    if (document.getElementById('children').style.display == "none") {
      // Change it to display block - substitute "block" for whatever CSS style you see fit.
      document.getElementById('children').style.display = "block";
      document.getElementById('adult').style.display = "none";
    }
  // Else - the adult button is clicked
  else {
    // If adult isn't currently being displayed
    if (document.getElementById('adult').style.display == "none") {
      // Change it to display block - substitute "block" for whatever CSS style you see fit.
      document.getElementById('adult').style.display = "block";
      document.getElementById('children').style.display = "none";
    }
  }
}

Open in new window

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 4

Expert Comment

by:ryangiglio
ID: 24852216
Oh, I found the error.  Again, my mistake.

The SELECT has an ID of "adults" but the code is using the ID of "adult"

This code works with no error! Sorry about that.
function changeMenu(clicked) {
          
          // If the children button is clicked
          if (clicked == "children") {
            // If children isn't currently being displayed
            if (document.getElementById('children').style.display == "none") {
              // Change it to display block - substitute "block" for whatever CSS style you see fit.
              document.getElementById('children').style.display = "block";
			  document.getElementById('adults').style.display = "none";
            }
          // Else - the adult button is clicked
          else {
            // If adult isn't currently being displayed
            if (document.getElementById('adults').style.display == "none") {
              // Change it to display block - substitute "block" for whatever CSS style you see fit.
              document.getElementById('adults').style.display = "block";
			  document.getElementById('children').style.display = "none";
            }
          }
        }
        }

Open in new window

0
 
LVL 11

Author Comment

by:tobzzz
ID: 24852250
I get this error for the function (see below). Sorry, I really don't know how to debug JS. I counted that you have as many open and close brackets so at a guess it looks good, but IE8 doesn't like it.

Message: Expected '}'
Line: 24
Char: 1

may be better to copy my code so you can see for yourself?
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
	function changeMenu(clicked) {
	  // If the children button is clicked
	  if (clicked == "children") {
	    // If children isn't currently being displayed
	    if (document.getElementById('children').style.display == "none") {
	      // Change it to display block - substitute "block" for whatever CSS style you see fit.
	      document.getElementById('children').style.display = "block";
	      document.getElementById('adult').style.display = "none";
	    }
	  // Else - the adult button is clicked
	  else {
	    // If adult isn't currently being displayed
	    if (document.getElementById('adult').style.display == "none") {
	      // Change it to display block - substitute "block" for whatever CSS style you see fit.
	      document.getElementById('adult').style.display = "block";
	      document.getElementById('children').style.display = "none";
	    }
	  }
	}
</SCRIPT>
 
</HEAD>
 
<BODY>
 
<FORM ACTION="test.asp" METHOD="POST">
 
<P><input type="button" value="adults" onclick="changeMenu('adult')"></P>
 
<P><input type="button" value="kids" onclick="changeMenu('children')"></P>
 
<!-- If "for children" is clicked -->
<SELECT NAME="category" id="children" style="display:none">
  <OPTION>Clowns</OPTION>
  <OPTION>Facepainters</OPTION>
  <OPTION>Bouncy Castle Hire</OPTION>
</SELECT>
 
<!-- If "for adults" is clicked -->
<SELECT NAME="category" id="adults" style="display:block">
  <OPTION>Live Bands</OPTION>
  <OPTION>Casino Hire</OPTION>
  <OPTION>Mobile Bar Hire</OPTION>
</SELECT>
 
<P><input type="submit"></P>
	
</FORM>
 
</BODY>
</HTML>

Open in new window

0
 
LVL 4

Expert Comment

by:ryangiglio
ID: 24852278
I apologize for spamming your thread.  I fixed the code you were working with.  There was a } missing after the first IF

This definitely works. Trust me :)
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
        function changeMenu(clicked) {
          // If the children button is clicked
          if (clicked == "children") {
            // If children isn't currently being displayed
            if (document.getElementById('children').style.display == "none") {
              // Change it to display block - substitute "block" for whatever CSS style you see fit.
              document.getElementById('children').style.display = "block";
              document.getElementById('adults').style.display = "none";
            }
          }
          // Else - the adult button is clicked
          else {
            // If adult isn't currently being displayed
            if (document.getElementById('adults').style.display == "none") {
              // Change it to display block - substitute "block" for whatever CSS style you see fit.
              document.getElementById('adults').style.display = "block";
              document.getElementById('children').style.display = "none";
            }
          }
        }
</SCRIPT>
 
</HEAD>
 
<BODY>
 
<FORM ACTION="test.asp" METHOD="POST">
 
<P><input type="button" value="adults" onClick="changeMenu('adults')"></P>
 
<P><input type="button" value="kids" onClick="changeMenu('children')"></P>
 
<!-- If "for children" is clicked -->
<SELECT NAME="category" id="children" style="display:none">
  <OPTION>Clowns</OPTION>
  <OPTION>Facepainters</OPTION>
  <OPTION>Bouncy Castle Hire</OPTION>
</SELECT>
 
<!-- If "for adults" is clicked -->
<SELECT NAME="category" id="adults" style="display:block">
  <OPTION>Live Bands</OPTION>
  <OPTION>Casino Hire</OPTION>
  <OPTION>Mobile Bar Hire</OPTION>
</SELECT>
 
<P><input type="submit"></P>
        
</FORM>
 
</BODY>
</HTML>

Open in new window

0
 
LVL 11

Author Comment

by:tobzzz
ID: 24852336
That does the hiding and revealing perfectly, good stuff.

You're going to hate me, but..... even though you've hidden the SELECT input, it still passes through the category. So when I response.write the form variable I see
"Clowns, Live Bands" :-(

It doesn't solve my problem unfortunately. Any further thoughts how to get around this?

Thanks for help so far...
0
 
LVL 4

Expert Comment

by:ryangiglio
ID: 24852393
There's two ways to solve that.

The first would be to make each dropdown have a unique name, such as

<SELECT NAME="children" id="children" style="display:none">
  <OPTION>Clowns</OPTION>
  <OPTION>Facepainters</OPTION>
  <OPTION>Bouncy Castle Hire</OPTION>
</SELECT>
 
<!-- If "for adults" is clicked -->
<SELECT NAME="adults" id="adults" style="display:block">
  <OPTION>Live Bands</OPTION>
  <OPTION>Casino Hire</OPTION>
  <OPTION>Mobile Bar Hire</OPTION>
</SELECT>

If that's not an option because of the way your processing page works, you're going to have to get a little more complex and use the javascript replaceChild() function to swap out the children and adults dropdowns.  If that's the route you need to go I can show you how that works.

0
 
LVL 11

Author Comment

by:tobzzz
ID: 24852476
Unfortunately I cannot rename the select input because when the code is used "in real life" it is for a search in the front end, and in the secure back-end it is used to assign the categories etc. basically it's used in lots of places and the codes already written :(

I've added a further 100 points on the question for it.
0
 
LVL 4

Expert Comment

by:ryangiglio
ID: 24852696
Replace the old javascript function with this one

What it does is create a new "select" element and replace the old one with it.  That was there's only ever one at a time on the page.

you also don't need the style="display:block" in the select tag anymore.
function changeMenu(clicked) {
          if (clicked == "children") {
            if (document.getElementById('children') == null) {
				var childDropdown = document.createElement("select");
				childDropdown.setAttribute("id", "children");
				childDropdown.setAttribute("name", "category");
				
				var clowns = document.createElement("option");
				clowns.innerHTML = "Clowns";
				childDropdown.appendChild(clowns);
				
				var facepainters = document.createElement("option");
				facepainters.innerHTML = "FacePainters";
				childDropdown.appendChild(facepainters);
				
				var bouncyCastleHire = document.createElement("option");
				bouncyCastleHire.innerHTML = "Bouncy Castle Hire";
				childDropdown.appendChild(bouncyCastleHire);
				
				var adultDropdown = document.getElementById('adults');
				adultDropdown.parentNode.replaceChild(childDropdown, adultDropdown);
			} 
          }
          // Else - the adult button is clicked
          else {
            // If adult isn't currently being displayed
            if (document.getElementById('adults') == null) {
                var adultDropdown = document.createElement("select");
				adultDropdown.setAttribute("id", "adults");
				adultDropdown.setAttribute("name", "category");
				
				var liveBands = document.createElement("option");
				liveBands.innerHTML = "Live Bands";
				adultDropdown.appendChild(liveBands);
				
				var casinoHire = document.createElement("option");
				casinoHire.innerHTML = "Casino Hire";
				adultDropdown.appendChild(casinoHire);
				
				var mobileBarHire = document.createElement("option");
				mobileBarHire.innerHTML = "Mobile Bar Hire";
				adultDropdown.appendChild(mobileBarHire);
				
				var childDropdown = document.getElementById('children');
				childDropdown.parentNode.replaceChild(adultDropdown, childDropdown);
            }
          }
        }

Open in new window

0
 
LVL 11

Author Comment

by:tobzzz
ID: 24852768
Can you copy and paste what the BODY content should be like please, as it's not working for me.

Thanks!
0
 
LVL 4

Accepted Solution

by:
ryangiglio earned 1400 total points
ID: 24852830
Sorry, I also forgot to mention you needed to delete the "child" select.
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
        function changeMenu(clicked) {
          if (clicked == "children") {
            if (document.getElementById('children') == null) {
				var childDropdown = document.createElement("select");
				childDropdown.setAttribute("id", "children");
				childDropdown.setAttribute("name", "category");
				
				var clowns = document.createElement("option");
				clowns.innerHTML = "Clowns";
				childDropdown.appendChild(clowns);
				
				var facepainters = document.createElement("option");
				facepainters.innerHTML = "FacePainters";
				childDropdown.appendChild(facepainters);
				
				var bouncyCastleHire = document.createElement("option");
				bouncyCastleHire.innerHTML = "Bouncy Castle Hire";
				childDropdown.appendChild(bouncyCastleHire);
				
				var adultDropdown = document.getElementById('adults');
				adultDropdown.parentNode.replaceChild(childDropdown, adultDropdown);
			} 
          }
          // Else - the adult button is clicked
          else {
            // If adult isn't currently being displayed
            if (document.getElementById('adults') == null) {
                var adultDropdown = document.createElement("select");
				adultDropdown.setAttribute("id", "adults");
				adultDropdown.setAttribute("name", "category");
				
				var liveBands = document.createElement("option");
				liveBands.innerHTML = "Live Bands";
				adultDropdown.appendChild(liveBands);
				
				var casinoHire = document.createElement("option");
				casinoHire.innerHTML = "Casino Hire";
				adultDropdown.appendChild(casinoHire);
				
				var mobileBarHire = document.createElement("option");
				mobileBarHire.innerHTML = "Mobile Bar Hire";
				adultDropdown.appendChild(mobileBarHire);
				
				var childDropdown = document.getElementById('children');
				childDropdown.parentNode.replaceChild(adultDropdown, childDropdown);
            }
          }
        }
</SCRIPT>
 
</HEAD>
 
<BODY>
 
<FORM ACTION="test.asp" METHOD="POST">
 
<P><input type="button" value="adults" onClick="changeMenu('adults')"></P>
 
<P><input type="button" value="kids" onClick="changeMenu('children')"></P>
 
<!-- If "for adults" is clicked -->
<SELECT NAME="category" id="adults">
  <OPTION>Live Bands</OPTION>
  <OPTION>Casino Hire</OPTION>
  <OPTION>Mobile Bar Hire</OPTION>
</SELECT>
 
<P><input type="submit"></P>
        
</FORM>
 
</BODY>
</HTML>

Open in new window

0
 
LVL 11

Author Closing Comment

by:tobzzz
ID: 31603352
Thanks for persevering, that works really well. Great job :-)
0
 
LVL 11

Author Comment

by:tobzzz
ID: 24854244
One other question, if you don't mind...

How can I define the option value in the function?

E.g. see code below:
// Right now its...
var clowns = document.createElement("option");
clowns.innerHTML = "Clowns";
childDropdown.appendChild(clowns);
 
var facepainters = document.createElement("option");
facepainters.innerHTML = "FacePainters";
childDropdown.appendChild(facepainters);
 
gives:
<SELECT NAME="category" id="adults">
  <OPTION>Clowns</OPTION>
  <OPTION>Facepainters</OPTION>
</SELECT>
 
// How do I achieve this:
<SELECT NAME="category" id="adults">
  <OPTION VALUE="15">Clowns</OPTION>
  <OPTION VALUE="38">Facepainters</OPTION>
</SELECT>

Open in new window

0
 
LVL 4

Expert Comment

by:ryangiglio
ID: 24854329
Not a problem.

You need to add a new line after you create each "option" element that sets its "value" attribute.

It looks like this:

option.setAttribute("value", "valueYouWant");

Here is an example.  I'm sure you can apply this to the rest of the options
var clowns = document.createElement("option");
clowns.innerHTML = "Clowns";
clowns.setAttribute("value", "15");				childDropdown.appendChild(clowns);

Open in new window

0

Featured Post

Plesk WordPress Toolkit

Plesk's WordPress Toolkit allows server administrators, resellers and customers to manage their WordPress instances, enabling a variety of development workflows for WordPress admins of all skill levels, from beginners to pros.

See why 2/3 of Plesk servers use it.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

664 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question