Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2011
    Location
    London
    Posts
    31
    Thanks
    5
    Thanked 1 Time in 1 Post

    Javascript switch case problem

    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...

    Code:
    <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.

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    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.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,350
    Thanks
    23
    Thanked 618 Times in 617 Posts
    a second thing (but alas not the solution) is
    Code:
    }
    </script>
    S/B
    Code:
    });
    </script>
    and
    Code:
    $("#topiclevel").change();
    Shouldn't that be added to the last two case statements?

    Code:
    <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.
    Last edited by sunfighter; 05-27-2012 at 03:18 PM. Reason: to add the script and the last line


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •