Forums

LaneSalaman

I have a form for a client where I need a certain amount of passengers to display a certain amount vehicle types.
I'm holding a brief demo here: http://www.webspinning.co.uk/demos/lynx-form/ . I want the end result to be exactly the same but I can't figure out how to do it without using different divs, I want it so that it hides and shows each option.

Here is the code:
HTML:


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />

		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

		<title>Airport Lynx Form Upgrade</title>
		<meta name="description" content="" />
		<meta name="author" content="Robert Salaman" />

		<meta name="viewport" content="width=device-width; initial-scale=1.0" />

		<link rel="shortcut icon" href="/favicon.ico" />
		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
		<link rel="stylesheet" href="common.css" />
		
		<script src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
 				$('.box').hide();
  				$('#dropdown').change(function() {
    			$('.box').hide();
    			$('#div' + $(this).val()).show();
 				});
			});
		</script>
	</head>

	<body>
		
		<div id="wrapper">
			
			<div class="form">
							
				<div class="passengers">
				<form>
					<span class="red">*</span> Passengers:
 					<select id="dropdown" name="dropdown">
  					<option value="0">Number of Passengers</option>
  					<option value="area1">1</option>
  					<option value="area1">2</option>
  					<option value="area1">3</option>
  					<option value="area2">4</option>
  					<option value="area3">5</option>
  					<option value="area4">6-8</option>
  					<option value="area5">9-16</option>
 					</select>
				</form>
				</div>
				<div id="divarea1" class="box">
					<span class="red">*</span>Vehicle Type:
					<select id="vehicle" name="vehicle" class="bookFieldSelect" tabindex="117">
					<option value="" selected>Select Vehicle</option>
					<option value="">--------------------</option>
					<option value="CAR">Saloon</option>
					<option value="EXC">VIP</option>
					<option value="EST">Estate</option>
					<option value="MPV">MPV</option>
					<option value="VAN">Large MPV</option>
					<option value="BUS">Minibus</option>  	
				</select>
				</div>
				<div id="divarea2" class="box">
					<span class="red">*</span>Vehicle Type:
					<select id="vehicle" name="vehicle" class="bookFieldSelect" tabindex="117">
					<option value="" selected>Select Vehicle</option>
					<option value="">--------------------</option>
					<option value="CAR">Saloon</option>
					<option value="EXC">VIP</option>
					<option value="EST">Estate</option>
					<option value="MPV">MPV</option>
					<option value="VAN">Large MPV</option>
					<option value="BUS">Minibus</option>  	
				</select>
				<p>4 passengers is not the most comfortable way to travel in a Saloon, Vip or Estate. Have you considered a larger vehicle?</p>
				</div>
				<div id="divarea3" class="box">
					<span class="red">*</span>Vehicle Type:
					<select id="vehicle" name="vehicle" class="bookFieldSelect" tabindex="117">
					<option value="" selected>Select Vehicle</option>
					<option value="">--------------------</option>
					<option value="MPV">MPV</option>
					<option value="VAN">Large MPV</option>
					<option value="BUS">Minibus</option>   	
				</select>
				</div>
				<div id="divarea4" class="box">
					<span class="red">*</span>Vehicle Type:
					<select id="vehicle" name="vehicle" class="bookFieldSelect" tabindex="117">
					<option value="" selected>Select Vehicle</option>
					<option value="">--------------------</option>
					<option value="VAN">Large MPV</option>
					<option value="BUS">Minibus</option>   	
					</select>
				</div>
				<div id="divarea5" class="box">
					<span class="red">*</span>Vehicle Type:
					<select id="vehicle" name="vehicle" class="bookFieldSelect" tabindex="117">
					<option value="" selected>Select Vehicle</option>
					<option value="">--------------------</option> 
					<option value="BUS">Minibus</option>   	
					</select>
				</div>
				
			</div>
			
		</div>
		
		<script>$('body').hide(); $('body').fadeIn(1500);</script>
		
	</body>
</html>

CSS:

body { background: #eee; font-family: 'PT Sans', Calibri, Arial; font-size: 1.2em; }

#wrapper { width: 800px; text-align: center; margin: 0 auto; }
#wrapper .form { width: 750px; float: left; text-align: left; padding: 25px; background: #fff; box-shadow: 0 0 1px 2px rgba(30, 30, 30, 0.3); margin: 25px 0 0 0; }
#wrapper .form select { background: #eee; border: 1px solid #ddd; font-size: 1em; font-family: 'PT Sans', Calibri, Arial; margin: 0 0 0 25px; }
#wrapper .form .red { color: #ff3333; margin: 0 5px 0 0; }

#wrapper .form .passengers { width: 100%; float: left; }
#wrapper .form #divarea1 { width: 100%; float: left; margin: 40px 0 0 0; }
#wrapper .form #divarea2 { width: 100%; float: left; margin: 40px 0 0 0; }
#wrapper .form #divarea2 p { width: 718px; padding: 15px; background: #f7f7f7; border: 1px solid #ddd; line-height: 33px; border-radius: 3px; }
#wrapper .form #divarea3 { width: 100%; float: left; margin: 40px 0 0 0; }
#wrapper .form #divarea4 { width: 100%; float: left; margin: 40px 0 0 0; }
#wrapper .form #divarea5 { width: 100%; float: left; margin: 40px 0 0 0; }

Any help will be really appreciated, thank you.

Paulie_D

The only way I can think of (with a single list) is to apply and remove classes (for visibility/display) based on the number of passengers or, alternatively, change css properties of specific classes based on the selected number.

All with JS, of course, but that's outside my comfort zone.

LaneSalaman

@Paulie_D thank you for your response, I've figured it out now :)

treehouse : what would you like to learn today?

Forums

[Solved] jQuery show hide each option rather than div