Javascript not working....Please help!!!!!

[deb65]

I am trying to do a dropdown of the suburbs and the selected value would show the corresponding details. I have managed to workout a code but its not working properly....

I mean its not working at all!!!

Even the basic html wont show!!

Please help me with this. I have the code written but I am in a mess here.

Code is

<script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
	$(function(){
		$("#event_type_id").change(function () {
			var val = $(this).val();
			switch(parseInt(val)){
			case 1: 
				$("#Alexandra Headlands").show();
				$("#Battery Hill").hide();
                                $("#Beerwah").hide();
                                $("#Bellvista").hide();
                                $("#Birtinya").hide();
                                $("#Bokarina").hide();
                                $("#Boreen Point").hide();
                                $("#Brightwater").hide();
                                $("#Buddina").hide();
                                $("#Buderim").hide();
                                $("#Burnside").hide();
                                $("#Caloundra").hide();
                                $("#Caloundra West").hide();
                                $("#Castaways Beach").hide();
                                $("#Chancellor Park").hide();
                                $("#Conondale").hide();
                                $("#Collum Beach").hide();
                                $("#Dicky Beach").hide();
                                $("#Diddilibah").hide();
                                $("#Golden Beach").hide();
                                $("#Ilkley").hide();
                                $("#Kawana Forest").hide();
                                $("#Kawana Islands").hide();
                                $("#Kenilworth").hide();
                                $("#Kilcoy").hide();
                                $("#Kin Kin").hide();
                                $("#Kings Beach").hide();
                                $("#Landsborough").hide();
                                $("#Little Mountain").hide();
                                $("#Mapleton").hide();
                                $("#Marcoola").hide();
                                $("#Marcus Beach").hide();
                                $("#Maroochy River").hide();
                                $("#Maroochydore").hide();
                                $("#Meridan Plains").hide();
                                $("#Minyama").hide();
                                $("#Moffat Beach").hide();
                                $("#Montville").hide();
                                $("#Mooloolaba").hide();
                                $("#Mooloolah Valley").hide();
                                $("#Mount Coolum").hide();
                                $("#Mountain Creek").hide();
                                $("#Mudjimba").hide();
                                $("#Nambour").hide();
                                $("#Noosa Heads").hide();
                                $("#Noosa North Shore").hide();
                                $("#Noosaville").hide();
                                $("#North Maleny").hide();
                                $("#Pacific Paradise").hide();
                                $("#Palmview").hide();
                                $("#Palmwoods").hide();
                                $("#Parrearra").hide();
                                $("#Peachester").hide();
                                $("#Pelican Waters").hide();
                                $("#Peregian Beach").hide();
                                $("#Peregian Springs").hide();
                                $("#Rosemount").hide();
                                $("#Sippy Downs").hide();
                                $("#Sunrise Beach").hide();
                                $("#Sunshine Beach").hide();
                                $("#Tanawha").hide();
                                $("#Tewantin").hide();
                                $("#Warana").hide();
                                $("#Wurtulla").hide();
                                $("#Yandina").hide();
                                $("#Yaroomba").hide();
				break;
                        case 2: 
				$("#Alexandra Headlands").hide();
				$("#Battery Hill").show();
                                $("#Beerwah").hide();
                                $("#Bellvista").hide();
                                $("#Birtinya").hide();
                                $("#Bokarina").hide();
                                $("#Boreen Point").hide();
                                $("#Brightwater").hide();
                                $("#Buddina").hide();
                                $("#Buderim").hide();
                                $("#Burnside").hide();
                                $("#Caloundra").hide();
                                $("#Caloundra West").hide();
                                $("#Castaways Beach").hide();
                                $("#Chancellor Park").hide();
                                $("#Conondale").hide();
                                $("#Collum Beach").hide();
                                $("#Dicky Beach").hide();
                                $("#Diddilibah").hide();
                                $("#Golden Beach").hide();
                                $("#Ilkley").hide();
                                $("#Kawana Forest").hide();
                                $("#Kawana Islands").hide();
                                $("#Kenilworth").hide();
                                $("#Kilcoy").hide();
                                $("#Kin Kin").hide();
                                $("#Kings Beach").hide();
                                $("#Landsborough").hide();
                                $("#Little Mountain").hide();
                                $("#Mapleton").hide();
                                $("#Marcoola").hide();
                                $("#Marcus Beach").hide();
                                $("#Maroochy River").hide();
                                $("#Maroochydore").hide();
                                $("#Meridan Plains").hide();
                                $("#Minyama").hide();
                                $("#Moffat Beach").hide();
                                $("#Montville").hide();
                                $("#Mooloolaba").hide();
                                $("#Mooloolah Valley").hide();
                                $("#Mount Coolum").hide();
                                $("#Mountain Creek").hide();
                                $("#Mudjimba").hide();
                                $("#Nambour").hide();
                                $("#Noosa Heads").hide();
                                $("#Noosa North Shore").hide();
                                $("#Noosaville").hide();
                                $("#North Maleny").hide();
                                $("#Pacific Paradise").hide();
                                $("#Palmview").hide();
                                $("#Palmwoods").hide();
                                $("#Parrearra").hide();
                                $("#Peachester").hide();
                                $("#Pelican Waters").hide();
                                $("#Peregian Beach").hide();
                                $("#Peregian Springs").hide();
                                $("#Rosemount").hide();
                                $("#Sippy Downs").hide();
                                $("#Sunrise Beach").hide();
                                $("#Sunshine Beach").hide();
                                $("#Tanawha").hide();
                                $("#Tewantin").hide();
                                $("#Warana").hide();
                                $("#Wurtulla").hide();
                                $("#Yandina").hide();
                                $("#Yaroomba").hide();
				break;
			
                       }
		});
	});
</script>
<style>
	#Alexandra Headlands,#Battery Hill,#Beerwah,#Bellvista,#Birtinya,#Bokarina,#Boreen Point,#Brightwater,#Buddina,#Buderim,#Burnside,#Caloundra,#Caloundra West,#Castaways Beach,#Chancellor Park,#Conondale,#Collum Beach,#Dicky Beach,#Golden Beach,#Kawana Forest,#Kawana Islands,#Kenilworth,#Kin Kin,#Kings Beach,#Landsborough,#Little Mountain,#Mapleton,#Marcoola,#Marcus Beach,#Maroochy River,#Maroochydore,#Meridan Plains,#Minyama,#Moffat Beach,#Montville,#Mooloolaba,#Mooloolah Valley,#Mount Coolum,#Mountain Creek,#Mudjimba,#Nambour,#Noosa Heads,#Noosaville,#Pacific Paradise,#Palmview,#Palmwoods,#Parrearra,#Peachester,#Pelican Waters,#Peregian Beach,#Peregian Springs,#Sippy Downs,#Sunrise Beach,#Sunshine Beach,#Tewantin,#Warana,#Wurtulla,#Yandina { background:yellow; padding: 10px 5px 10px 5px; }
	#Kilcoy,#Diddillibah,#Ilkley,#Noosa North Shore,#North Maleny,#Rosemount,#Tanawha,#Yaroomba { background:red; padding: 10px 5px 10px 5px; }
</style>

<p align="justify">&nbsp;</p>
<strong>Please select the suburb name from the list to view the details.</strong><br/><br/>
<table width="675" cellspacing="0" cellpadding="2" border="0">
<thead>
<tr>
<td class="title">Want to know detail about?</td><td class="field"><select id="event_type_id" name="event_type_id">
		<option>Please select the suburb you want to know about</option>
		<option value="1" rel="Alexandra Headlands">Alexandra Headlands</option>
<option value="2" rel="Battery Hill">Battery Hill</option>


	</select></td>
</tr>
</thead></table>

	<div id="Alexandra Headlands" style="display: none">Events</div>
	<div id="Battery Hill" style="display: none">Announcements</div>

Really appreciate any help from the members.

Newbie in JSP trying to do something out of my scope. Guess that's how you learn

[WolfShade]

Check the browser error console and look for whatever is breaking your JS.

[Philip M]

That is ghastly code. Simply set all the suburb names paras to "hide", and then set the one that is required to "show".

Why are you using jQuery for such a simple task?

The closing CODE tag is /CODE.

Do please read the posting guidelines regarding silly thread titles. The thread title is supposed to help people who have a similar problem in future. Yours is useless for this purpose. You can (and should) edit it to make it more meaningful.



All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

[xelawho]

makes me sleepy just looking at that code.

You're in for a major refactor anyway, so starting from the ground up:

id's can't have spaces, so minimum you would have to change this:

<div id="Alexandra Headlands" style="display: none">Events</div>

to something like this:

<div id="Alexandra_Headlands" style="display: none">Events</div>

but while you are there, you might as well give all of your divs a classname:

<div class="suburb" id="Alexandra_Headlands">Events</div>
<div class=suburb" id="Battery_Hill" >Announcements</div>

then apply the style to all of them in the css in one hit:

<style>
.suburb { background:yellow; padding: 10px 5px 10px 5px; display:none}
</style>

then onto the javascript. You can use your onchange function to hide everything in that class (most of it will already be hidden, but hiding it twice makes no difference), then show the one you are interested in:

$("#event_type_id").change(function () {
$(".suburb").hide();
var val = $(this).val();
switch(parseInt(val)){
case 1: 
$("#Alexandra Headlands").show();
//etc

or, refactoring a little more, you can save your self may more code, by storing the id of the div in the value of the select and using that to tell the code what to show. With your html like this:

<div class="suburb" id="Alexandra_Headlands">Events</div>
<div class=suburb" id="Battery_Hill" >Announcements</div>

<select id="event_type_id" name="event_type_id">
<option>Please select the suburb you want to know about</option>
<option value="Alexandra_Headlands" rel="Alexandra Headlands">Alexandra Headlands</option>
<option value="Battery_Hill" rel="Battery Hill">Battery Hill</option>
</select>

your entire function could look like this:

$("#event_type_id").change(function () {
$(".suburb").hide();
var theburb = $(this).val();
$("#"+theburb).show();
});

hope that helps.