[jQuery] Hide/show divs based on form parameters
Hi all,
I'm trying to selectively hide and show divs based on what a user
specifies using three select boxes in a form.
I'm quite new to jQuery so I'm probably missing something obvious, but
here's what I've got and it doesn't, work, they divs just stay hidden.
Any help would be greatly appreciated!
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".coursecontent").hide();
var area = $(document).getUrlParam("area");
var level = $(document).getUrlParam("level");
var time = $(document).getUrlParam("time");
$("." + area + "." + level + "." + time).show();
});
</script>
<title>Javascript 'search' demo</title>
</head>
<body>
<form>
Find a Course
We have something for everyone!
<div class="BoxBody">
<select id="area" name="area" size=1 style="outline: none">
<option value="" selected>Select Course area</option>
<option value="">Any</option>
<option value="barry">Barry</option>
<option value="canton">Canton</option>
<option value="cardiffbay">Cardiff Bay</option>
<option value="cardiffcentre">Cardiff Centre</option>
<option value="cowbridge">Cowbridge</option>
<option value="creigiau">Creigiau</option>
<option value="ely">Ely</option>
<option value="grangetown">Grangetown</option>
<option value="gwaelodygarth">Gwaelod y Garth</option>
<option value="llandaf">Llandaf</option>
<option value="llanishen">Llanishen</option>
<option value="llanrumney">Llanrumney</option>
<option value="llantwitmajor">Llantwit Major</option>
<option value="penarth">Penarth</option>
<option value="pentwyn">Pentwyn</option>
<option value="pontprennau">Pontprennau</option>
<option value="rhiwbina">Rhiwbina</option>
<option value="roath">Roath</option>
<option value="rumney">Rumney</option>
<option value="splott">Splott</option>
<option value="st Athan">St Athan</option>
<option value="whitchurch">Whitchurch</option>
<option value="wick">Wick</option>
</select>
<br />
<select name="level" size=1 style="outline: none">
<option value="" selected>Select Course level</option>
<option value="">Any</option>
<option value="pre">Pre-entry/Taster</option>
<option value="entry">Entry</option>
<option value="wlpan">Entry & Foundation (Wlpan)</option>
<option value="foundation">Foundation</option>
<option value="intermediate">Intermediate</option>
<option value="higher">Higher</option>
<option value="proficiency">Proficiency/Fine-Tuning</
option>
</select>
<br />
<select name="time" size=1 style="outline: none">
<option value="" selected>Select Course time</option>
<option value="">Any</option>
<option value="morning">Morning</option>
<option value="lunch">Lunchtime</option>
<option value="afternoon">Afternoon</option>
<option value="evening">Evening</option>
</select>
<br />
<input id="button" type="submit" value="Search"
style="outline: none">
</div>
</form>
<div class="coursecontent barry entry morning">
Barry, Entry, Morning
</div>
<div class="coursecontent canton entry evening">
Canton, Entry, Evening
</div>
<div class="coursecontent llanishen wlpan lunchtime">
Llanishen, Wlpan, Lunchtime
</div>
<div class="coursecontent penarth foundation evening">
Penarth, Foundation, Evening
</div>
<div class="coursecontent splott higher evening">
Splott, Higher, Evening
</div>
</body>
</html>