To hide select box and filter

Posted on 2011-09-12
Last Modified: 2012-05-12

I need to have the select box for the city and the filter choices to be hiden and
when the user select a state it should appear with the cities that are in the selected state.

The select church should be hidden unless the user select a city.

Please, take a look at my site

how can I first set the Select city dropdown box to hidden and when the user select a state to be visible I need to the same thing with city and church

Question by:lulu50
  • 2
LVL 33

Accepted Solution

Big Monty earned 250 total points
ID: 36523888
for populating the dropdowns based upon the selection, check out:

for changing the visibility, just surround the select box with a div tag, set its visibility to hidden, then in the onchange event for the first dropdown, change its visibility to visible
LVL 82

Expert Comment

ID: 36523917
LVL 82

Assisted Solution

leakim971 earned 250 total points
ID: 36523951
you may use css to hide the city list by default :

#GetCity {

with : <select id="GetCity" name="GetCity" ...

in the callback of your ajax call (currently this may not be clear for you, just take your time to read the links provided) you unhide the list with :
document.getElementByid("getCity").style.visibility = "visible";

Author Closing Comment

ID: 36524251
Thank you

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
filter portfolio grid display on page load (wordpress) 7 26
Generate Numbers in JQuery file 11 66
jsp error 6 25
Character counter breaks after adding EmojiOne Area 4 19
This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

789 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