...

View Full Version : Javascript switch case problem



Artyboy2011
05-27-2012, 09:34 AM
Hi, i am makeing a form that changed its options depending on what you select. I cant get the switch case to work. Please help, the code is below...



<html>
<head>
<title>My website</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="scripts/css.css">
<style type="text/css">
.searchdiv{
border-colour:#0066cc;
border: 5px;
background-color:#3399ff;
width:500px;
height: 200px;
padding: 5px;
}
</style>

<script type="text/javascript" src=""></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#gradelevel").on('change', function(){
switch ($("#gradelevel").val()){
case "%":
$("#topiclevel").empty();
$("#topiclevel").append('<option value="%">All Levels</option>','<optgroup label="KS3/4">','<option value="Algebra">Algebra</option>','<option value="Geometry & measures">Geometry &amp; measures</option>','<option value="Number">Number</option>','<option value="Statistics">Statistics</option>','</optgroup>','<optgroup label="KS5">','<option value="C1">C1</option>','<option value="C2">C2</option>','<option value="C3">C3</option>','<option value="C4">C4</option>','<option value="D1">D1</option>','<option value="M1">M1</option>','<option value="S1">S1</option>','</optgroup>','<option value="Bits & Bobs">Bits &amp; Bobs</option>');
$("#topiclevel").change();
break;
case "y7": case "y8": case "y9":
$("#topiclevel").empty();
$("#topiclevel").append('<option value="%">All Levels</option>','<option value="Algebra">Algebra</option>','<option value="Geometry & measures">Geometry &amp; measures</option>','<option value="Number">Number</option>','<option value="Statistics">Statistics</option>','<option value="Bits & Bobs">Bits &amp; Bobs</option>');
$("#topiclevel").change();
break;
case "gcse":
$("#topiclevel").empty();
$("#topiclevel").append('<option value="%">All Levels</option>','<option value="exam1">Exam 1</option>','<option value="exam2">Exam 2</option>','<option value="exam3">Exam 3</option>','<option value="C4">C4</option>','<option value="D1">D1</option>','<option value="M1">M1</option>','<option value="S1">S1</option>','<option value="Bits & Bobs">Bits &amp; Bobs</option>');
break;
case "as": case "a2":
$("#topiclevel").empty();
$("#topiclevel").append('<option value="%">All Levels</option>','<option value="C1">C1</option>','<option value="C2">C2</option>','<option value="C3">C3</option>','<option value="C4">C4</option>','<option value="D1">D1</option>','<option value="M1">M1</option>','<option value="S1">S1</option>','<option value="Bits & Bobs">Bits &amp; Bobs</option>');
break;
}
});
}
</script>

</head>
<body>
<h1>Maths SIte</h1>
<div class="searchdiv">
<form id="searchfilter" method="post" action="">
<label for="gradelevel" id="gradelevelLabel">Grade: </label>
<select name="gradelevel" id="gradelevel">
<option value="%">All</option>
<option value="y7">Year 7</option>
<option value="y8">Year 8</option>
<option value="y9">Year 9</option>
<option value="gcse">GCSE</option>
<option value="as">AS</option>
<option value="a2">A2</option>
</select>
<br/><br/>

<label for="topiclevel">Curriculum Level</label>
<select name="topiclevel" id="topiclevel">
<option value="%">All</option>
<optgroup label="KS3/4">
<option value="algebra">Algebra</option>
<option value="data">Data</option>
<option value="number">NUmber</option>
<option value="shape">Shape</option>
<option value="statistics">Statistics</option>
</optgroup>
Age = document.frmOne.cmbAge.value<optgroup label="A level">
<option value="c1">C1</option>
<option value="c2">C2</option>
<option value="c3">C3</option>
<option value="c4">C4</option>
<option value="d1">D1</option>
<option value="m1">M1</option>
<option value="s1">S1</option>
</optgroup>
<optgroup label="Other">
<option value="randomstuff">Random Stuff</option>
</optgroup>
</select>
<br/><br/>
<label for="resourceTopic" id="resourceTopicLabel" class="resourceTopicHider">Topic</label>
<select name="resourceTopic" id="resourceTopic" class="resourceTopicHider">
<option value="%">All</option>
<optgroup label="Algebra">
<option value="Equations, formulae & expressions">Equations, formulae &amp; expressions</option>
<option value="Sequences, functions & graphs">Sequences, functions &amp; graphs</option>
</optgroup>
<optgroup label="Data">
<option value="2D & 3D Shapes">2D &amp; 3D Shapes</option>
<option value="Angles">Angles</option>
<option value="Angles">Construction &amp; loci</option>
<option value="Measures">Measures</option>
<option value="Transformations & coordinates">Transformations &amp; coordinates</option>
</optgroup>
<optgroup label="Shape">
<option value="Fractions, decimals, percentages">Fractions, decimals, percentages</option>
<option value="Integers, powers & roots">Integers, powers &amp; roots</option>
<option value="Place value & ordering">Place value &amp; ordering</option>
<option value="Ratio & proportion">Ratio &amp; proportion</option>
<option value="Written & mental calculations">Written &amp; mental calculations</option>
</optgroup>
<optgroup label="Statistics">
<option value="Collecting data">Collecting data</option>
<option value="Interpreting results">Interpreting results</option>
<option value="Probability">Probability</option>
<option value="Processing & representing data">Processing &amp; representing data</option>
</optgroup>
</select>

</br></br><input type="submit" name="Submit" value="search" >
</form>
</div>
</body>
</html>


Thanks, also could you expain why this code didnt work so i can learn.

Logic Ali
05-27-2012, 02:33 PM
First get rid of <script type="text/javascript" src=""></script> which will cause you inexplicable errors.

To find the script errors, use the error console.

sunfighter
05-27-2012, 03:04 PM
a second thing (but alas not the solution) is

}
</script>
S/B

});
</script>

and
$("#topiclevel").change(); Shouldn't that be added to the last two case statements?


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#gradelevel").on('change', function(){
switch ($("#gradelevel").val()){
case "%":
$("#topiclevel").empty();
$("#topiclevel").append('<option value="%">All Levels</option>','<optgroup label="KS3/4">','<option value="Algebra">Algebra</option>','<option value="Geometry & measures">Geometry &amp; measures</option>','<option value="Number">Number</option>','<option value="Statistics">Statistics</option>','</optgroup>','<optgroup label="KS5">','<option value="C1">C1</option>','<option value="C2">C2</option>','<option value="C3">C3</option>','<option value="C4">C4</option>','<option value="D1">D1</option>','<option value="M1">M1</option>','<option value="S1">S1</option>','</optgroup>','<option value="Bits & Bobs">Bits &amp; Bobs</option>');
$("#topiclevel").change();
break;
case "y7": case "y8": case "y9":
$("#topiclevel").empty();
$("#topiclevel").append('<option value="%">All Levels</option>','<option value="Algebra">Algebra</option>','<option value="Geometry & measures">Geometry &amp; measures</option>','<option value="Number">Number</option>','<option value="Statistics">Statistics</option>','<option value="Bits & Bobs">Bits &amp; Bobs</option>');
$("#topiclevel").change();
break;
case "gcse":
$("#topiclevel").empty();
$("#topiclevel").append('<option value="%">All Levels</option>','<option value="exam1">Exam 1</option>','<option value="exam2">Exam 2</option>','<option value="exam3">Exam 3</option>','<option value="C4">C4</option>','<option value="D1">D1</option>','<option value="M1">M1</option>','<option value="S1">S1</option>','<option value="Bits & Bobs">Bits &amp; Bobs</option>');
$("#topiclevel").change();
break;
case "as": case "a2":
$("#topiclevel").empty();
$("#topiclevel").append('<option value="%">All Levels</option>','<option value="C1">C1</option>','<option value="C2">C2</option>','<option value="C3">C3</option>','<option value="C4">C4</option>','<option value="D1">D1</option>','<option value="M1">M1</option>','<option value="S1">S1</option>','<option value="Bits & Bobs">Bits &amp; Bobs</option>');
$("#topiclevel").change();
break;
}
});
});
</script>Maybe the fixed version. Check it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum