Hi all,
I am pretty new to jQuery, and I'm looking for a way to kind of
'filter' divs depending on the parameters supplied by a form.
I have three select boxes that set 'area', 'level', and 'time'
parameters (for courses).
I have given corresponding classes to some example divs, and I want
the ones that match the parameters to be visible, and the rest to be
hidden.
Here is what I have got, but it doesn't work (they all stay no matter
what parameters are supplied). 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>
<p>Find a Course</p>
<p>We have something for everyone!</p>
<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>
