www.webdeveloper.com
Results 1 to 2 of 2

Thread: [RESOLVED] Dynamic Dropdown Selection: How to populate an Image (First Code)

  1. #1
    Join Date
    Oct 2013
    Posts
    1

    resolved [RESOLVED] Dynamic Dropdown Selection: How to populate an Image (First Code)

    Hi, I'm new to the forum and JS (this is my first code and I have little to no knowledge past HTML/CSS).

    I am making a dynamic drop down menu that lets you select predefined car Makes and Models. After your first selection of the car Make, it will show predefined car Models of that Make. The last part I am wanting to do is after selecting the your car Model, the code will display a photo of the car and also predefined text (ex. engine size and year produced) for that specific make/model .

    The code I currently have for the two drop downs doesn't seem to have any issues, it works as I want it to but I could have something wrong as I do not know JS. I am solely looking for help on how to accomplish my next goal/step in having it pull the car image and predefined text, unless someone finds an issue with my code

    Having issues getting the code to work on jsfiddle.net and post link, but works locally with code:

    HTML Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<script type="text/javascript" src="js/array.js"></script>
    		<link type="text/css" rel="stylesheet" href="main.css" />
    	</head>
    	
    	<body>
    		<div id="content">
    			<h2>Parts On Vehicles</h2>
    				<div id="selection">
    					Choose Car Make:
    						<select id="slct1" name="slct1" onchange="populate(this.id,'slct2')">
    						  <option value="">Select A Make</option>
    						  <option value="AO AvtoVAZ">AO AvtoVAZ</option>
    						  <option value="Acura">Acura</option>
    						  <option value="Audi">Audi</option>
    						  <option value="BMW">BMW</option>
    						  <option value="Buick">Buick</option>
    						  <option value="Cadillac">Cadillac</option>
    						  <option value="Citroen">Citroen</option>
    						  <option value="Chevy">Chevy</option>
    						  <option value="Chrysler">Chrysler</option>
    						  <option value="Dodge">Dodge</option>
    						  <option value="Fiat">Fiat</option>
    						  <option value="Ford">Ford</option>
    						  <option value="GMC">GMC</option>
    						  <option value="Infiniti">Infiniti</option>
    						  <option value="Honda">Honda</option>
    						  <option value="Hyundai">Hyundai</option>
    						  <option value="Jeep">Jeep</option>
    						  <option value="Kia">Kia</option>ion>
    						  <option value="Land Rover">Land Rover</option>
    						  <option value="Lexus">Lexus</option>
    						  <option value="Lincoln">Lincoln</option>
    						  <option value="Mazda">Mazda</option>
    						  <option value="Mercedes-Benz">Mercedes-Benz</option>
    						  <option value="Mitsubishi">Mitsubishi</option>
    						  <option value="Nissan">Nissan</option>
    						  <option value="Opel">Opel</option>
    						  <option value="Peugeot">Peugeot</option>
    						  <option value="Porsche">Porsche</option>
    						  <option value="SEAT">SEAT</option>
    						  <option value="Skoda">Skoda</option>
    						  <option value="Subaru">Subaru</option>
    						  <option value="Suzuki">Suzuki</option>
    						  <option value="Toyota">Toyota</option>
    						  <option value="Volkswagen">Volkswagen</option>
    						  <option value="Volvo">Volvo</option>
    						</select>
    						<br />
    						Choose Car Model:
    						<select id="slct2" name="slct2"></select>
    			</div>
    		</div>
    	</body>
    </html>
    JavaScript
    Code:
    function populate(s1,s2){
    	var s1 = document.getElementById(s1);
    	var s2 = document.getElementById(s2);
    	s2.innerHTML = "";
    	if(s1.value == "AO AvtoVAZ"){
    		var optionArray = ["|","kalina|Kalina"];
    	} else if(s1.value == "Acura"){
    		var optionArray = ["|","mdx|MDX","rdx|RDX","tl|TL"];
    	} else if(s1.value == "Audi"){
    		var optionArray = ["|","a4|A4","a6|A6","a8|A8","q7|Q7"];
    	} else if(s1.value == "BMW"){
    		var optionArray = ["|","1 series|1 Series","3 series|3 Series","5 series|5 Series","6 series|6 Series","7 series|7 Series","x1|X1","x3|X3","x5|X5","x6|X6","z4|Z4"];
    	} else if(s1.value == "Buick"){
    		var optionArray = ["|","enclave|Enclave","lacrosse|LaCrosse","regal|Regal","verano|Verano"];
    	} else if(s1.value == "Cadillac"){
    		var optionArray = ["|","ats|ATS","cts|CTS","escalade|Escalade/Escalade ESV","srx|SRX","xts|XTS"];
    	} else if(s1.value == "Citroen"){
    		var optionArray = ["|","berlingo|Berlingo","c1|C1","c3|C3/Picasso","c4|C4/Picasso","c5|C5","c6|C6","ds3|DS3"];
    	} else if(s1.value == "Chevy"){
    		var optionArray = ["|","aveo|Aveo","camaro|Camaro","captiva sport|Captiva Sport","colorado|Colorado","corvette|Corvette","cruze|Cruze","equinox|Equinox","express|Express","impala|Impala","malibu|Malibu","silverado|Silverado","silverado heavy duty|Silverado Heavy Duty","sonic|Sonic","suburban|Suburban","tahoe|Tahoe","travese|Travese","volt|Volt"];
    	} else if(s1.value == "Chrysler"){
    		var optionArray = ["|","200|200","300|300","town & country|Town & Country"];
    	} else if(s1.value == "Dodge"){
    		var optionArray = ["|","avenger|Avenger","caravan|Caravan","challenger|Challenger","charger|Charger","dart|Dart","durango|Durango","journey|Journey","promaster|Promaster","ram 1500|RAM (1500)","ram 2500|RAM (2500, 3500, 4500, 5000)"];
    	} else if(s1.value == "Fiat"){
    		var optionArray = ["|","500|500","albea|Albea","doblo|Doblo","ducato|Ducato","fiorino|Fiorino","linea|Linea","panda|Panda","punto|Punto"];
    	} else if(s1.value == "Ford"){
    		var optionArray = ["|","bmax|B-Max","cmax|C-MAX","ecosport|EcoSport","edge|Edge","escape|Escape","eseries|E-Series","expedition|Expedition","explorer|Explorer/Sport Trac","f150|F150/SuperCrew","f250f350|F250/F350 Superduty","fiesta|Fiesta","flex|Flex","focus|Focus","fusion|Fusion","kalina|Kalina","kuga|Kuga","mustang|Mustang","taurus|Taurus","transit|Transit"];
    	} else if(s1.value == "GMC"){
    		var optionArray = ["|","acadia|Acadia","canyon|Canyon (GMT 355)","savana|Savana (GMT 610)","sierra|Sierra (GMT 800)","sierra hd|Sierra HD (GMT 900)","terrain|Terrain","yukon|Yukon/Yukon XL"];
    	} else if(s1.value == "Infiniti"){
    		var optionArray = ["|","jx|JX"];
    	} else if(s1.value == "Honda"){
    		var optionArray = ["|","accord|Accord","civic|Civic","crv|CR-V","odyssey|Odyssey","pilot|Pilot","ridgeline|Ridgeline"];
    	} else if(s1.value == "Hyundai"){
    		var optionArray = ["|","i20|i20","mix35|iX35"];
    	} else if(s1.value == "Jeep"){
    		var optionArray = ["|","cherokee|Cherokee","compass|Compass","grand cherokee|Grand Cherokee","liberty|Liberty","patriot|Patriot","wrangler|Wrangler","	wrangler unlimited|Wrangler Unlimited"];
    	} else if(s1.value == "Kia"){
    		var optionArray = ["|","ceed|Cee'd","sportage|Sportage","venga|Venga"];
    	} else if(s1.value == "Land Rover"){
    		var optionArray = ["|","range rover|Range Rover"];
    	} else if(s1.value == "Lexus"){
    		var optionArray = ["|","rx|RX"];	
    	} else if(s1.value == "Lincoln"){
    		var optionArray = ["|","mark lt|Mark LT","mks|MKS","mkt|MKT","mkx|MKX","mkz|MKZ/Zephyr","navigator|Navigator"];
    	} else if(s1.value == "Mazda"){
    		var optionArray = ["|","mazda 6|Mazda 6"];
    	} else if(s1.value == "Mercedes-Benz"){
    		var optionArray = ["|","c class|C Class","e class|E Class","glk|GLK","gwagen|G-Wagen","ml class|ML Class","r class|R Class","s class|S Class","sl class|SL Class","slk|SLK"];
    	} else if(s1.value == "Mitsubishi"){
    		var optionArray = ["|","eclipse|Eclipse","galant|Galant"];
    	} else if(s1.value == "Nissan"){
    		var optionArray = ["|","altima|Altima","armada|Armada","frontier|Frontier","maxima|Maxima","micra|Micra","nvseries|NV-Series","pathfinder|Pathfinder","sentra|Sentra","titan|Titan","versa|Versa/Tiida"];
    	} else if(s1.value == "Opel"){
    		var optionArray = ["|","astra|Astra","combo|Combo","corse|Corse","insignia|Insignia","meriva|Meriva","zafira|Zafira"];
    	} else if(s1.value == "Peugeot"){
    		var optionArray = ["|","107|107","207|207/Van","208|208/Van","3008|3008","301|301","308|308","408|408","5008|5008","508|508","partnet|Partnet"];
    	} else if(s1.value == "Porsche"){
    		var optionArray = ["|","cayenne|Cayenne"];
    	} else if(s1.value == "SEAT"){
    		var optionArray = ["|","toledo|Toledo","ubiza|Ubiza"];
    	} else if(s1.value == "Skoda"){
    		var optionArray = ["|","octavia|Octavia"];
    	} else if(s1.value == "Subaru"){
    		var optionArray = ["|","legacy|Legacy"];
    	} else if(s1.value == "Suzuki"){
    		var optionArray = ["|","ignis|Ignis","splash|Splash","swift|Swift","sx4|SX4"];
    	} else if(s1.value == "Toyota"){
    		var optionArray = ["|","auris|Auris","avalon|Avalon","avensis|Avensis","aygo|Aygo","camry|Camry","corolla|Corolla","highlander|Highlander","matrix|Matrix","rav4|RAV4","sequoia|Sequoia","sienna|Sienna","tacoma|Tacoma","tundra|Tundra","venza|Venza","yaris|Yaris"];
    	} else if(s1.value == "Volkswagen"){
    		var optionArray = ["|","jetta|Jetta","passat|Passat","phaeton|Phaeton","routan|Routan","touareg|Touareg"];
    	} else if(s1.value == "Volvo"){
    		var optionArray = ["|","s60|S60","s80|S80","v70|V70","xc70|XC70","xc90|XC90",];
    	}
    	for(var option in optionArray){
    		var pair = optionArray[option].split("|");
    		var newOption = document.createElement("option");
    		newOption.value = pair[0];
    		newOption.innerHTML = pair[1];
    		s2.options.add(newOption);
    	}
    }
    CSS
    Code:
    @charset "UTF-8";
    
    /* CSS Document */
    
    /* structure */
    		
    body {
    				background-color: green;
    				margin-left: auto;
          			margin-right: auto;
            		font-family: Arial, Helvetica, sans-serif;
    				font-size:small;
    				font-weight:bold;
    				width:100%;
    			 	}
    				
    #content{
    				background-color: white;
    				width: 90%;
    				height: 400px;
    				margin:auto;
    				text-align: center;
    				}	
    			
    #selection {
    				background-color: pink;
    				width: 300px;
    				height: 45px;
    				padding-left: 10%;
    				text-align: left;
    				}

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,656
    html

    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<script type="text/javascript" src="js/array.js"></script>
    		<link type="text/css" rel="stylesheet" href="main.css" />
    	</head>
    	
    	<body>
    		<div id="content">
    			<h2>Parts On Vehicles</h2>
    				<div id="selection">
    					Choose Car Make:
    						<select id="slct1" name="slct1" onchange="populate(this,'slct2')">
    						  <option value="">Select A Make</option>
    						  <option value="AO AvtoVAZ">AO AvtoVAZ</option>
    						  <option value="Acura">Acura</option>
    						  <option value="Audi">Audi</option>
    						  <option value="BMW">BMW</option>
    						  <option value="Buick">Buick</option>
    						  <option value="Cadillac">Cadillac</option>
    						  <option value="Citroen">Citroen</option>
    						  <option value="Chevy">Chevy</option>
    						  <option value="Chrysler">Chrysler</option>
    						  <option value="Dodge">Dodge</option>
    						  <option value="Fiat">Fiat</option>
    						  <option value="Ford">Ford</option>
    						  <option value="GMC">GMC</option>
    						  <option value="Infiniti">Infiniti</option>
    						  <option value="Honda">Honda</option>
    						  <option value="Hyundai">Hyundai</option>
    						  <option value="Jeep">Jeep</option>
    						  <option value="Kia">Kia</option>ion>
    						  <option value="Land Rover">Land Rover</option>
    						  <option value="Lexus">Lexus</option>
    						  <option value="Lincoln">Lincoln</option>
    						  <option value="Mazda">Mazda</option>
    						  <option value="Mercedes-Benz">Mercedes-Benz</option>
    						  <option value="Mitsubishi">Mitsubishi</option>
    						  <option value="Nissan">Nissan</option>
    						  <option value="Opel">Opel</option>
    						  <option value="Peugeot">Peugeot</option>
    						  <option value="Porsche">Porsche</option>
    						  <option value="SEAT">SEAT</option>
    						  <option value="Skoda">Skoda</option>
    						  <option value="Subaru">Subaru</option>
    						  <option value="Suzuki">Suzuki</option>
    						  <option value="Toyota">Toyota</option>
    						  <option value="Volkswagen">Volkswagen</option>
    						  <option value="Volvo">Volvo</option>
    						</select>
    						<br />
    						Choose Car Model:
    						<select id="slct2" name="slct2"></select>
    						<div id="carimg"></div>
    						<div id="carinfo"></div>
    			</div>
    		</div>
    	</body>
    </html>
    javascript(js/array.js)

    Code:
    var Cars=[
    ["AO AvtoVAZ",
    ["|","kalina|Kalina","priora|Priora"],
    ["http://www.kristall-avto.ru/images/lada/kalina/kalina_sedan_kalina.png","http://www.auto-moll.ru/upload/iblock/dca/31289213135.png"],
    ["Kalina tech info","Priora tech info"]]/*,
    ["Acura",["|","mdx|MDX","rdx|RDX","tl|TL"]],
    ["Audi",["|","a4|A4","a6|A6","a8|A8","q7|Q7"]],
    ["BMW",["|","1 series|1 Series","3 series|3 Series","5 series|5 Series","6 series|6 Series","7 series|7 Series","x1|X1","x3|X3","x5|X5","x6|X6","z4|Z4"]],
    ["Buick",["|","enclave|Enclave","lacrosse|LaCrosse","regal|Regal","verano|Verano"]],
    ["Cadillac",["|","ats|ATS","cts|CTS","escalade|Escalade/Escalade ESV","srx|SRX","xts|XTS"]],
    ["Citroen",["|","berlingo|Berlingo","c1|C1","c3|C3/Picasso","c4|C4/Picasso","c5|C5","c6|C6","ds3|DS3"]],
    ["Chevy",["|","aveo|Aveo","camaro|Camaro","captiva sport|Captiva Sport","colorado|Colorado","corvette|Corvette","cruze|Cruze","equinox|Equinox","express|Express","impala|Impala","malibu|Malibu","silverado|Silverado","silverado heavy duty|Silverado Heavy Duty","sonic|Sonic","suburban|Suburban","tahoe|Tahoe","travese|Travese","volt|Volt"]],
    ["Chrysler",["|","200|200","300|300","town & country|Town & Country"]],
    ["Dodge",["|","avenger|Avenger","caravan|Caravan","challenger|Challenger","charger|Charger","dart|Dart","durango|Durango","journey|Journey","promaster|Promaster","ram 1500|RAM (1500)","ram 2500|RAM (2500, 3500, 4500, 5000)"]],
    ["Fiat",["|","500|500","albea|Albea","doblo|Doblo","ducato|Ducato","fiorino|Fiorino","linea|Linea","panda|Panda","punto|Punto"]],
    ["Ford",["|","bmax|B-Max","cmax|C-MAX","ecosport|EcoSport","edge|Edge","escape|Escape","eseries|E-Series","expedition|Expedition","explorer|Explorer/Sport Trac","f150|F150/SuperCrew","f250f350|F250/F350 Superduty","fiesta|Fiesta","flex|Flex","focus|Focus","fusion|Fusion","kalina|Kalina","kuga|Kuga","mustang|Mustang","taurus|Taurus","transit|Transit"]],
    ["GMC",["|","acadia|Acadia","canyon|Canyon (GMT 355)","savana|Savana (GMT 610)","sierra|Sierra (GMT 800)","sierra hd|Sierra HD (GMT 900)","terrain|Terrain","yukon|Yukon/Yukon XL"]],
    ["Infiniti",["|","jx|JX"]],
    ["Honda",["|","accord|Accord","civic|Civic","crv|CR-V","odyssey|Odyssey","pilot|Pilot","ridgeline|Ridgeline"]],
    ["Hyundai",["|","i20|i20","mix35|iX35"]],
    ["Jeep",["|","cherokee|Cherokee","compass|Compass","grand cherokee|Grand Cherokee","liberty|Liberty","patriot|Patriot","wrangler|Wrangler","	wrangler unlimited|Wrangler Unlimited"]],
    ["Kia",["|","ceed|Cee'd","sportage|Sportage","venga|Venga"]],
    ["Land Rover",["|","range rover|Range Rover"]],
    ["Lexus",["|","rx|RX"]],
    ["Lincoln",["|","mark lt|Mark LT","mks|MKS","mkt|MKT","mkx|MKX","mkz|MKZ/Zephyr","navigator|Navigator"]],
    ["Mazda",["|","mazda 6|Mazda 6"]],
    ["Mercedes-Benz",["|","c class|C Class","e class|E Class","glk|GLK","gwagen|G-Wagen","ml class|ML Class","r class|R Class","s class|S Class","sl class|SL Class","slk|SLK"]],
    ["Mitsubishi",["|","eclipse|Eclipse","galant|Galant"]],
    ["Nissan",["|","altima|Altima","armada|Armada","frontier|Frontier","maxima|Maxima","micra|Micra","nvseries|NV-Series","pathfinder|Pathfinder","sentra|Sentra","titan|Titan","versa|Versa/Tiida"]],
    ["Opel",["|","astra|Astra","combo|Combo","corse|Corse","insignia|Insignia","meriva|Meriva","zafira|Zafira"]],
    ["Peugeot",["|","107|107","207|207/Van","208|208/Van","3008|3008","301|301","308|308","408|408","5008|5008","508|508","partnet|Partnet"]],
    ["Porsche",["|","cayenne|Cayenne"]],
    ["SEAT",["|","toledo|Toledo","ubiza|Ubiza"]],
    ["Skoda",["|","octavia|Octavia"]],
    ["Subaru",["|","legacy|Legacy"]],
    ["Suzuki",["|","ignis|Ignis","splash|Splash","swift|Swift","sx4|SX4"]],
    ["Toyota",["|","auris|Auris","avalon|Avalon","avensis|Avensis","aygo|Aygo","camry|Camry","corolla|Corolla","highlander|Highlander","matrix|Matrix","rav4|RAV4","sequoia|Sequoia","sienna|Sienna","tacoma|Tacoma","tundra|Tundra","venza|Venza","yaris|Yaris"]],
    ["Volkswagen",["|","jetta|Jetta","passat|Passat","phaeton|Phaeton","routan|Routan","touareg|Touareg"]],
    ["Volvo",["|","s60|S60","s80|S80","v70|V70","xc70|XC70","xc90|XC90"]]
    */
    ];
    
    function doc(id){return document.getElementById(id);}
    
    function populate(obj,s2){
    var val=obj.options[obj.selectedIndex].value,s2=doc(s2);
    s2.options.length=0;
    if(val==''){return;}
    else{
    firstloop:for(var i=0;i<Cars.length;i++){
    if(val!==Cars[i][0]){continue;}
    else{
    var arr=Cars[i][1],imgArr=Cars[i][2],infoArr=Cars[i][3];
    for(var z=0;z<arr.length;z++){
    var pair=arr[z].split("|");
    s2.options[z]=new Option(pair[1]||'Select Model',pair[0],false,false);
    if(z>0){
    s2.options[z].setAttribute('data-img',eval('imgArr['+(z-1)+']'));
    s2.options[z].setAttribute('data-info',eval('infoArr['+(z-1)+']'));
    }
    }
    
    s2.onchange=function(){
    var val=this.options[this.selectedIndex].value,
    attr=this.options[this.selectedIndex].attributes;
    if(this.selectedIndex==0){doc('carimg').innerHTML=doc('carinfo').innerHTML='';return;}
    else{
    doc('carimg').innerHTML='<img src="'+attr['data-img'].nodeValue+'" alt="" />';
    doc('carinfo').innerHTML=attr['data-info'].nodeValue;
    }
    }
    
    break firstloop;
    }
    }
    }
    }
    this example works only for AO AvtoVAZ. to make it fully working uncomment the other members of the Cars object and add images and info for every model the way it's done for AO AvtoVAZ. the structure of every member is:

    Code:
    [
    "Brandname",
    ["|","model|Model",etc.,"model|Model"],
    ["pic for first model",etc.,"pic for last model"],
    ["info for first model",etc.,"info for last model"]
    ],

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles