Issue in implementing city dropdown in the home page

Hi All,
I am creating a website for online bakery product delivery. It should display some featured product on the front page. In the top bar, it should ask to select the delivery city from the dropdown. Based on the selection made by the customer, the respective city page will open that will have all the bakery products related to that particular city.
I am finding it very hard to implement this city dropdown logic. Can any one suggest how to implement this feature in Magento...where upon selection of the city, it should take us to the city page ??
Can we use the catagories to implement this ? Please help.

A Magento Development, Hire Magento Developer Services

 

I'm not familiar with Magneto or understand what you meant by categories for implementation, but this seems to work:

<script language="javascript">
function toCity(optionValue) {
    if(optionValue=="") return false;
    window.location='http://www.yoursitehere.com/'+optionValue;}
</script>

<select onchange="toCity(this.options[this.selectedIndex].value);">
    <option>Select the delivery city...</option>
    <option value="newyork.html">New York</option>
    <option value="chicago.html">Chicago</option>
</select>

Code (markup):

 

Now, no offense @slime, but that's EXACTLY what I refer to when I talk about bad practices. There is NO reason for something as simple as this to be (improperly) putting a SELECT outside a form, or wasting javascript on it given it means ZERO graceful degradation.

The solution is simple -- CSS dropdown filled with anchors.

<div id="toCity">
	Select the Delivery City:
	<ul>
		<li><a href="/nh/cities/keene.html">Keene, NH</a></li>
		<li><a href="/nh/cities/marlboro.html">Marlboro, NH</a></li>
		<li><a href="/nh/cities/swanzey.html">Swanzey, NH</a></li>
		<li><a href="/nh/cities/chesterfield.html">Chesterfield, NH</a></li>
		<li><a href="/nh/cities/antrim.html">Antrim, NH</a></li>
		<li><a href="/nh/cities/claremont.html">Claremont, NH</a></li>
		<li><a href="/vt/cities/brattleboro.html">Brattleboro, VT</a></li>
	</ul>
</div>

Code (markup):

/* assumes reset is in use */
#toCity {
	position:relative;
	overflow:hidden;
	line-height:1.5em;
	height:1.5em;
}

#toCity:hover {
	overflow:visible;
}

#toCity ul {
	position:absolute;
	top:1.5em;
	left:0;
	overflow:auto; /* show scrollbar if needed */
	max-height:15em; /* 10 lines at once max */
}

Code (markup):

No scripting, gracefully degrades CSS off, uses semantic markup and doesn't abuse a FORM element for something it's NOT SUPPOSED TO BE USED FOR. (you know, the reason STRICT throws a validation error on it?).

You could also make the text "Select the Delivery City:" an anchor targeting #toCity so you can use #toCity:target to force it to stay open when selected -- a good option for single dropdowns on mobile.

People tend to dive for javascript and form elements on things that shouldn't be using either a LOT -- and websites end up inaccessible or broken because of it for a LOT of users.