Beginner help please.

Media999

Hi

Im trying to teach myself a bit about web design. Im trying to build a website that people need to select a type of good. ie. Lets say they are buying car parts they need to select the model of car

What i want is say a drop down menu . If they select Audi a second dropdown menu populates and they have all the Audi cars A4 A6 etc.. then a third dropdown menu will show the engine size etc..


Im not even sure what its called so cant Google it.

Similar to what halfords have

Here

Anyone know what its called / Tutorial on how to create one / template of one or anything else ??

Aswerty

You can view the source code of web pages on all modern browsers. Typically through right clicking the page and clicking view source. Alternatively most modern browsers either have addons or native functionality for viewing the source code and page together. In chrome you can go options->tools->developer tools or in Firefox you can use fire bug.

What you are trying to do is use a select element which is described here: https://developer.mozilla.org/en/HTML/Element/select. The MDN is a great reference for web development.

Looking at the halfords source code you select the car make using the following code:

 <select name="makeName" id="makeName" title="Select a Make of car" >
		<option value="-1" selected="selected">choose make</option>
		
			<option value="2">AIXAM</option>
		
			<option value="10">ALFA ROMEO</option>
		
			<option value="11">AUDI</option>
		
			<option value="12">BMW</option>
		
			<option value="95">CADILLAC</option>
		
			<option value="8">CARBODIES</option>
		
			<option value="61">CHEVROLET</option>
		
			<option value="54">CHRYSLER</option>
		
			<option value="17">CITROEN</option>
		
			<option value="19">DACIA</option>
		
			<option value="13">DAEWOO</option>
		
			<option value="20">DAIHATSU</option>
		
			<option value="3">DODGE</option>
		
			<option value="22">FIAT</option>
		
			<option value="23">FORD</option>
		
			<option value="24">HONDA</option>
		
			<option value="6">HUMMER</option>
		
			<option value="25">HYUNDAI</option>
		
			<option value="1">INFINITY</option>
		
			<option value="51">ISUZU</option>
		
			<option value="72">IVECO</option>
		
			<option value="26">JAGUAR/DAIMLER</option>
		
			<option value="58">JEEP</option>
		
			<option value="56">KIA</option>
		
			<option value="53">LAND ROVER</option>
		
			<option value="49">LDV</option>
		
			<option value="62">LEXUS</option>
		
			<option value="4">LONDON TAXI (LTI)</option>
		
			<option value="29">LOTUS</option>
		
			<option value="30">MAZDA</option>
		
			<option value="31">MERCEDES</option>
		
			<option value="5">METROCAB (MCW)</option>
		
			<option value="68">MG MOTOR (NAC)</option>
		
			<option value="98">MICROCAR</option>
		
			<option value="9">MINI (BMW)</option>
		
			<option value="18">MITSUBISHI</option>
		
			<option value="65">MORGAN</option>
		
			<option value="21">NISSAN</option>
		
			<option value="32">OPEL</option>
		
			<option value="60">PERODUA</option>
		
			<option value="33">PEUGEOT</option>
		
			<option value="55">PORSCHE</option>
		
			<option value="52">PROTON</option>
		
			<option value="36">RELIANT</option>
		
			<option value="37">RENAULT</option>
		
			<option value="14">ROVER (AUSTIN MG MORRIS)</option>
		
			<option value="15">ROVER (ROVER)</option>
		
			<option value="84">ROVER COMMERCIAL</option>
		
			<option value="38">SAAB</option>
		
			<option value="50">SEAT</option>
		
			<option value="40">SKODA</option>
		
			<option value="63">SMART</option>
		
			<option value="39">SSANGYONG</option>
		
			<option value="41">SUBARU</option>
		
			<option value="42">SUZUKI</option>
		
			<option value="43">TALBOT</option>
		
			<option value="96">TATA</option>
		
			<option value="44">TOYOTA</option>
		
			<option value="91">TOYOTA COMMERCIAL</option>
		
			<option value="16">TRIUMPH</option>
		
			<option value="59">TVR</option>
		
			<option value="45">VAUXHALL</option>
		
			<option value="92">VAUXHALL COMMERCIAL</option>
		
			<option value="46">VOLKSWAGEN</option>
		
			<option value="93">VOLKSWAGEN COMMERCIAL</option>
		
			<option value="47">VOLVO</option>
		
	</select>	

Aswerty

Woops didn't notice you wanted to know how to update subsequent select elements. This is done using javascript such that when you select an option in the first list the html for the second list is updated with new html containing the now required data. The new data can either be stored in the javascript function or the data can be requested from the server using ajax. Requesting from the server is the better option because otherwise you would have to send all the data in the web page. The former approach requires a server side language to be used but the latter does not.

The code that does this isn't jumping out at me but has to be there somewhere. Halfords use the ajax approach since only the list of car makes is in the web page before the java script does it's job.

Freddio

if you google "dynamic dropdown" , you will get a start but there are three heads to this monster for you

1) the database
2) the html/javacript
3) the bit that connects (1) and (2)

Media999

Nice one lads. Im on the right path now. Just couldnt even think of the term to search with Google. Everybody has to start somewhere

Google popped up with "dynamic dropdown three selects" so followed through and looks like its what im after. Will research further tomorrow and see what happens. Nice one.