Can anyone help me on a select form? I hava car makes and models, for each make there is a group of models, I have urls for each model. If you know how to do it please post a little snippet for me
There might be tons out there if you have a chance to Google. Or something like this simple one below might help (untested though): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>test</title> <meta content="text/html; charset=utf-8" http-equiv="content-type" /> <script type="text/javascript"> var MakeModelURL = { audi:[ 'quattro,http://example.com/quattro', 'R8,http://example.com/r8' ], cadillac:[ 'eldorado,http://example.com/eldorado', 'seville,http://example.com/seville', 'escallade,http://example.com/escallade', 'sts,http://example.com/sts' ], fiat:[ 'barchetta,http://example.com/barchetta', 'spider,http://example.com/spider', 'coupe,http://example.com/coupe' ] }; function changeMake(me){ //delete current model options while (me.form.model.length > 0) me.form.model.options[0] = null; //delete current link var url = document.getElementById('url'); url.removeAttribute('href'); if (me.options[me.selectedIndex].value == 'none'){ url.childNodes[0].nodeValue = 'Pick a Make'; } else{ url.childNodes[0].nodeValue = 'Pick a Model'; //build models var models = eval('MakeModelURL.' + me.options[me.selectedIndex].value); for (var i=0, dummy; i<models.length; i++){ dummy = models[i].split(','); me.form.model.options[me.form.model.length] = new Option(dummy[0],dummy[1], false, false); } } } function changeModel(me){ var url = document.getElementById('url'); url.setAttribute('href', me.options[me.selectedIndex].value); url.childNodes[0].nodeValue = me.options[me.selectedIndex].value; } </script> </head> <body> <form> <label for="make">Make</label> <select id="make" name="make" onchange="changeMake(this)"> <option value="none" selected="selected"> - </option> <option value="audi">Audi</option> <option value="cadillac">Cadillac</option> <option value="fiat">Fiat</option> </select> <label for="model">Model</label> <select id="model" name="model" onchange="changeModel(this)"> </select> <a id="url">Pick a Make</a> </form> </body> </html> PHP:
If you want to not have to rewrite the site every time you have to add/change a make or model, use AJAX. Keep the makes and models in a database on the server. When the user selects a make, ask the server for the models for that make, then fill the select with them.