JSFiddle - React, Tailwind, and code Playground
HTML
<select name="selectlist_city" id="selectlist_city">
<option value="">Select city</option>
<option value="Arendal">Arendal</option>
<option value="Fannrem">Fannrem</option>
<option value="Molde">Molde</option>
<option value="Oslo" selected="selected">Oslo</option>
</select>
<div id="city_list">
<div class="list textfield50pc"><ul>
<li class="city Molde"><a href="#">AMFI</a></li>
<li class="city Oslo"><a href="#">Arkaden Shoppingt</a></li>
<li class="city Arendal"><a href="#">Maxis senter</a></li>
<li class="city Fannrem"><a href="#">Mo Marked AS</a></li>
<li class="city Molde"><a href="#">MoldeTorget</a></li>
<li class="city Oslo"><a href="#">Oslo City</a></li>
<li class="city Oslo"><a href="#">Paleet</a></li>
<li class="city Oslo"><a href="#">Veitvet senter</a></li>
<li class="city Oslo"><a href="#">Vika Terrassen</a></li>
<li class="city Oslo"><a href="#">Westside Senter</a></li>
</div>
</div>
CSS
#selectlist_city {float: left; }
#city_list {
margin-left: 20px;
height: 200px;
overflow: auto;
border: solid 1px #D1D2D1;
background-color: #fff;
padding: 5px;
width: 250px;
float: left;
}
#city_list .list .city { display: none; }
a { color: #0087D5; text-decoration: none; }
a:hover { textdecoration: underline; }
JavaScript
//On page load, lets see if a city is selected
var shmall_selected_city = jQuery('#selectlist_city option:selected').val();
if (shmall_selected_city.length > 0) {
jQuery('#city_list .list .' + shmall_selected_city).fadeIn('fast');
}
jQuery('#selectlist_city').live('change', function() {
shmall_selected_city = jQuery(this).val();
jQuery('#city_list .city'). fadeOut('normal');
jQuery('#city_list .' + shmall_selected_city).fadeIn('normal');
});