Hi all,

I'm currently doing a little function which will remove tbodies from a table depending on a value selected in a drop down menu, the only issue is that I'm not really sure how to "reset" the function each time I pick a new value. As it is now, once an element is removed - it won't show up if I pick the item in the drop down menu. Any suggestions?

Code below:

Code JavaScript:
jQuery(document).ready(function() {
	var city = document.getElementById('changeCity');
	city.onchange = function() {
		var selected = this.options[this.selectedIndex];
		cityName = selected.getAttribute('value');
		switch(cityName) {
		case "london":
			jQuery('#calendar tbody').not(':contains("London"), :first').hide();
			jQuery('#calendar h2').replaceWith('<h2>London</h2>');
			break;
		case "tokyo":
			jQuery('#calendar tbody').not(':contains("Tokyo"), :first').hide();
			jQuery('#calendar h2').replaceWith('<h2>Tokyo</h2>');
			break;
		case "newyork":
			jQuery('#calendar tbody').not(':contains("New York"), :first').hide();
			jQuery('#calendar h2').replaceWith('<h2>New York</h2>');
			break;
		case "rest":
			jQuery('#calendar tbody').hide(':contains("London"), :contains("Tokyo"), :contains("New York")');
			jQuery('#calendar h2').replaceWith('<h2>Other cities</h2>');
			break;
		}
	}
});