melisko 0 Newbie Poster

Hy guys i was creating small page , with mobile phones .
And i need little push .
The problem is this :
On main page i have small drop down menu which contain some values .
And i want to take the value and display the appropriate stuff inside a iframe . Every value has to contain different things but it need to be displayed inside the frame.? It is for mobile phones , and i want to sort them by price , like cheap , expensive etc. but i got stuck , what would be the best way to do it ?The problem how to display more of them into a one div , and many more . Well how would you do this ..dont need to know the code just the logic.Cause i used this :

var range 
			function set(){
			
			cheap =new Array(6);
			middle =new Array();
			moderate =new Array();
			expensive = new Array();
			alert(range); 
			
			range = document.getElementById('Select1').value;

			if (range=='cheap'){
				function LoadCheapPhones(){
					for(j=0;j<cheap.length;j++){
			      cheap[j] = new Array(2);
			
			}



cheap[0][0] ="LG GS101";
 cheap[0][1]= "<table><td width='300' height='450'><p align='center'><b >LG GS101</b><p><img src='pictures/LG/LGGS101.gif' width='300' height='300'><p align='center'><a href='PDF/LGgs101.pdf' target='_blank' ><img src='pictures/pdf.gif' border='0' ></a></p></td><tr><td width='300'><ul ><li><b>Type:</b>Classic</li><li><b>Dimensions:</b>103x43x12 mm</li><li><b>Weight:</b>65g</li><li><b>Display:</b>65k.colors</li><li><b>Display res.</b>128px/128px</li><li><b>Operating System:</b>Lg</li><li><b>Camera:</b>None</li><li><b>Battery:</b>950mAh/Li-Ion</li><li><b>StandBY Time:</b>Maximum:420Hours</li><li><b>Memory:</b>None</li><li><b>Extern Memory:</b>None</li><li><b>Gps:</b>None</li><li><b>Price:</b>48,996Eur</li></ul></td></tr></table>"
			  

 ShowPhoneRange();
			
			
			
				}
				function ShowPhoneRange(){
					 var z;
			     z=document.getElementById("PhoneRange");>>> this is div created in other page , n i need to display about 10 phones inside it ..
				
				 for(j=0;j<cheap.length;j++){
			        if(cheap[j][0] == document.Sidefrm.Select1.value){
					   z.innerHTML = cheap[j][1] ;
					  
					}
					
				  
			}   
		
	}	
	}   
}

Iam not sure if this is close to the solution ....

Dani AI

Generated

A concise plan for : separate the data (phones) from the view (markup) and treat the select as a filter, not as the container for HTML. Keep one container on the page (or inside the iframe only if needed) and re-render the list when the dropdown changes. That makes sorting, paging and responsive layout much easier than stuffing HTML strings into many JS variables.

Practical steps to follow: define a simple data model (id, name, numeric price, thumbnail, specs, detailUrl) and store it as JSON or behind a tiny API. On select-change, filter that list by numeric price ranges and sort using numeric comparison. Render results by cloning an HTML template (or requesting small HTML fragments from the server) and appending them into the single container; this avoids brittle string concatenation and is far easier to maintain (template element on MDN). For mobile, use small/responsive images, lazy loading and pagination to keep the initial payload light. If an iframe is unavoidable, send the selected range to it with postMessage and let the iframe render itself (watch cross-origin restrictions) (Window.postMessage on MDN). Use the Fetch API to load JSON or fragments when needed (Fetch API on MDN). Quick troubleshooting: inspect the console and Network tab, confirm prices are stored as numbers, and test on a slow network profile.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.