We help IT Professionals succeed at work.
Get Started
jQuery switch statement rendering two elements instead of one.
I am having an issue where jQuery is rendering two elements instead of one. I appologize for the messy html I haven't cleaned it up yet.
If "Little Ogeechee" is selected from the switch than both of the consolidated panels are rendered.
If "Little Ogeechee" is selected from the switch than both of the consolidated panels are rendered.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Consolidated Utilities, Inc.">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/ratesmobile.js"></script>
<script type = "text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-46277951-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<noscript>
<style>
#NoJs {display: none;}
</style>
</noscript>
<?php include '../includes/css.php';?>
<link href="../css/consolidated.css" rel="stylesheet">
<title>Rates</title>
<link href="../css/bootstrap.css" rel="stylesheet">
<style type = "text/css">
#center{margin-left:auto;
margin-right:auto;}
#rates{margin-left:30%; margin-right:30%;}
body {
padding-top: 50px;
background-color: #ccc;
}
.subdivision ul {text-align: left;}
</style>
<style type = "text/css">
#heading {margin-left:30%; margin-right:30%;}
#logo {float: left;}
@media (min-width: 768px) and (max-width: 979px) and (orientation:portrait) {
body {
-webkit-transform: rotate(90deg);
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
}
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href = "../" >Consolidated Utilities</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="../about/">About Us</a></li>
<li><a href = "../billing/">Billing</a></li>
<li><a href="../affiliatedsystems/">Affiliated Sytems</a><li>
<li class = "active"><a href="../rates/">Rates</a></li>
<li><a href="../conservation/">Conservation Efforts</a></li>
<li><a href="../contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class = "maxwidth">
<div class="container">
<div class="starter-template">
<img src = "../images/logo.jpg" height = "120" width = "196" id = "logo">
<h1 id = "heading">Rates</h1>
<br/>
<br/>
<hr>
<noscript>This page requires JavaScript to function.</noscript>
<div id = "NoJs">
<form id = "center">
<div class="rates">
<!-- This div will be used to render content from selected water system. "rates" id will allow me to render content using js -->
<div id="rates"></div>
</div>
<select name="WaterSystem" id="WaterSystem">
<option value="">---Select a subdivision---</option>
<option value="Consolidated">Berwick Market Place</option>
<option value="Consolidated">Berwick Lakes</option>
<option value="CoastalLLC2">Cypress Lakes</option>
<option value="Consolidated">Cedar Walk</option>
<option value="Consolidated">Chapel Park</option>
<option value="Consolidated">Cottages at Autumn Lakes</option>
<option value="CoastalLLC5">Cottonvale Estates</option>
<option value="Woodlawn">East Pines</option>
<option value="CoastalLLC">Effingham Park of Commerce</option>
<option value="Consolidated">Grand Oaks</option>
<option value="GoldenIsles">Golden Isles</option>
<option value="Consolidated">Glenwood Grove</option>
<option value="Consolidated">Hampton Place</option>
<option value="Consolidated">Highland Woods</option>
<option value="Consolidated">Lakes at Black Creek</option>
<option value="Consolidated">Lakes at Cottonvale</option>
<option value="Consolidated">Larchmont Estates</option>
<option value="Consolidated">Legacy Square</option>
<option value="Consolidated">Laurel Oaks</option>
<option value="Consolidated2">Little Ogeechee</option>
<option value="GoldenIsles">Lots along Johnny Mercer Boulevard</option>
<option value="Whitemarsh">Lots along Bryan Woods</option>
<option value="Consolidated">Laurelwood</option>
<option value="Consolidated">Laurel Green</option>
<option value="Consolidated">Mosswood</option>
<option value="CoastalLLC">Millcreek</option>
<option value="CoastalLLC1">Mingledorff (Copperfield)</option>
<option value="Coastal">McCall Plaza</option>
<option value="Coastal">Magnolia Plaza</option>
<option value="Woodlawn">Oatland Island</option>
<option value="Coastal">Olde Towne Plaza</option>
<option value="CoastalLLC6">Rebel Estates</option>
<option value="Consolidated">Regency</option>
<option value="CoastalLLC">Ridgecrest</option>
<option value="CoastalLLC1">South Pointe</option>
<option value="Consolidated">Southbridge</option>
<option value="Consolidated">Salt Creek Landings</option>
<option value="CoastalLLC1">Southern Hills</option>
<option value="CoastalLLC1">Sandy Woods</option>
<option value="Consolidated">Stonebridge</option>
<option value="Consolidated">Stonelake</option>
<option value="Consolidated">The Enclave</option>
<option value="CoastalLLC3">Twenty One Centre</option>
<option value="Consolidated">Village at Berwick</option>
<option value="Consolidated">Village at Autumn Lakes</option>
<option value="Coastal">Waterford Park</option>
<option value="Whitemarsh">Whitemarsh Estates</option>
<option value="CoastalLLC1">White Bluff</option>
<option value="Consolidated">Willow Lakes</option>
<option value="Coastal">Westwood Heights</option>
<option value="Coastal">Westwood Plaza</option>
</select>
</form>
</div>
</div>
</div><!-- /.container -->
</div>
<hr/>
<?php include '../copyright.php';?>
</body>
</html>
$(function() {
$("#WaterSystem").change(function() {
var RtnMessage;
var rates = $("#rates").empty();
var selectedValue = $("#WaterSystem").val();
if (selectedValue) {
switch(selectedValue){
case 'Consolidated':
rtnMessage = '<div class="panel panel-default subdivision"><di';
rtnMessage += 'v class="panel-heading"><h3 class="panel-title ';
rtnMessage += 'img-responsive">Consolidated Utilities, Inc.';
rtnMessage += '</h3></div><div cass="panel-body"><br/><ul><li>';
rtnMessage += '$32.00 Base Rate</li><li>$3.60 per 1,000';
rtnMessage += ' gallons up to 5,000 gallons</li><li>$6.20 per ';
rtnMessage += '1,000 gallons between 5,001-10,000 gallons</li>';
rtnMessage += '<li>$7.20 per 1,000 gallons 10,001 and above';
rtnMessage += '</li></ul></div><h4>Other Charges:</h4><p>';
rtnMessage += '<div id = "lists"><ul><li>$100 dollar deposit';
rtnMessage += ' to set up service</li><li>$40 service fee for ';
rtnMessage += 'past due accounts</li><li>If a lock is cut ';
rtnMessage += 'there will be a $50 fee</li><li>Other damages ';
rtnMessage += 'can be $100 dollars or more depending on damage';
rtnMessage += ' done.</li></ul></div></div></div>';
rates.append(rtnMessage);
break;
case 'Consolidated2':
rtnMessage += '<div class="panel panel-default subdivision">';
rtnMessage += '<div class="panel-heading"><h3 class="panel-tit';
rtnMessage += 'le img-responsive">Consolidated Utilities, Inc.';
rtnMessage += '</h3></div><div class="panel-body"><ul>';
rtnMessage += '<li>$18.00 Base Rate</li><li>$3.60 per 1,000 ';
rtnMessage += 'gallons up to 5,000 gallons</li><li>$6.20 per ';
rtnMessage += '1,000 gallons between 5,001-10,000 gallons</li>';
rtnMessage += '<li>$7.20 per 1,000 gallons 10,001 and above';
rtnMessage += '</li></ul><h4>Other Charges:</h4><p><ul><li>';
rtnMessage += '$100 dollar deposit to set up service</li>';
rtnMessage += '<li>$40 service fee for past due accounts</li>';
rtnMessage += '<li>If a lock is cut there will be a $50 fee';
rtnMessage += '</li><li>Other damages can be $100 dollars or ';
rtnMessage += 'more depending on damage done.</li></ul></div>';
rtnMessage +='</div>';
rates.append(rtnMessage);
break;
case 'Coastal':
rtnMessage = '<div class="panel panel-success subdivision">';
rtnMessage += '<div class="panel-heading"><h3 class="panel-ti';
rtnMessage += 'tle">Coastal Water Company, LLC</h3></div><div ';
rtnMessage += 'class="panel-body"><ul><li>$31.50 Base Rate</li';
rtnMessage += '><li>$4.00 per 1,000 gallons</li><li>$1.60 per';
rtnMessage += ' 1,000 after 5,000 used</li></ul><h4>Other ';
rtnMessage += 'Charges:</h4><p><ul><li>$100 dollar deposit to ';
rtnMessage += 'set up service</li><li>$40 service fee for past';
rtnMessage += ' due accounts</li><li>If a lock is cut there ';
rtnMessage += 'will be a $50 fee</li><li>Other damages can be';
rtnMessage += ' $100 dollars or more depending on damage done.';
rtnMessage += '</li></ul></div></div>';
rates.append(rtnMessage);
break;
case 'CoastalLLC':
rtnMessage = '<div class="panel panel-success subdivision">';
rtnMessage += '<div class="panel-heading"><h3 class="panel-tit';
rtnMessage += 'le">Coastal Water Company, LLC</h3></div>';
rtnMessage += '<div class="panel-body"><ul><li>$31.50 Base Rate';
rtnMessage += '</li><li>$4.00 per 1,000 gallons</li><li>$1.60'
rtnMessage += ' per 1,000 after 5,000 used</li></ul><h4>Other';
rtnMessage += ' Charges</h4><p><ul><li>$100 dollar deposit to ';
rtnMessage += 'set up service</li><li>$40 service fee for past';
rtnMessage += ' due accounts</li><li>If a lock is cut there';
rtnMessage += ' will be a $50 fee</li><li>Other damages can be';
rtnMessage += ' $100 dollars or more depending on damage done.';
rtnMessage += '</li></ul></p></div></div>';
rates.append(rtnMessage);
break;
case 'CoastalLLC1':
rtnMessage = '<div class="panel panel-success subdivision">';
rtnMessage += '<div class="panel-heading"><h3 class="panel-tit';
rtnMessage += 'le">Coastal Water Company, LLC</h3></div><div ';
rtnMessage += 'class="panel-body"><ul><li>$34.00 up to 5,000 ';
rtnMessage += 'gallons</li><li>$2.50 per 1,000 after 5,000';
rtnMessage += ' used</li></ul><h4>Other Charges</h4><p><ul>';
rtnMessage += '<li>$100 dollar deposit to set up service</li>';
rtnMessage += '<li>$40 service fee for past due accounts</li>';
rtnMessage += '<li>If a lock is cut there will be a $50 fee';
rtnMessage += '</li><li>Other damages can be $100 dollars or';
rtnMessage += ' more depending on damage done.</li></ul></p>';
rtnMessage += '</div></div>';
rates.append(rtnMessage);
break;
case 'CoastalLLC2':
rtnMessage = '<div class="panel panel-success subdivision">';
rtnMessage += '<div class="panel-heading"><h3 class="panel-tit';
rtnMessage += 'le">Coastal Water Company, LLC</h3></div><div ';
rtnMessage += 'class="panel-body"><ul><li>$36.00 Flat Rate</l';
rtnMessage += 'i></ul><h4>Other Charges</h4><p><ul><li>$100 do';
rtnMessage += 'llar deposit to set up service</li><li>$40 serv';
rtnMessage += 'ice fee for past due accounts</li><li>If a lock';
rtnMessage += ' is cut there will be a $50 fee</li><li>Other ';
rtnMessage += 'damages can be $100 dollars or more depending ';
rtnMessage += 'on damage done.</li></ul></p></div></div></div>';
rates.append(rtnMessage);
break;
case 'CoastalLLC3':
rtnMessage = '<div class="panel panel-success subdivision">';
rtnMessage += '<div class="panel-heading"><h3 class="panel-tit';
rtnMessage += 'le">Coastal Water Company, LLC</h3></div><div ';
rtnMessge += 'class="panel-body"><ul><li>$45.00 flat rate</li>';
rtnMessage += '</ul><h4>Other Charges</h4><p><ul><li>$100 doll';
rtnMessage += 'ar deposit to set up service</li><li>$40 servic';
rtnMessage += 'e fee for past due accounts</li><li>If a lock ';
rtnMessage += 'is cut there will be a $50 fee</li><li>Other ';
rtnMessage += 'damages can be $100 dollars or more depending ';
rtnMessage += 'on damage done.</li></ul></p></div></div></div>';
rates.append(rtnMessage);
break;
case 'CoastalLLC4':
rtnMessage = '<div class="panel panel-success subdivision">';
rtnMessage += '<div class="panel-heading"><h3 class="panel-tit';
rtnMessage += 'le">Coastal Water Company, LLC</h3></div><div ';
rtnMessage += 'class="panel-body"><ul><li>$34.00 flat rate</l';
rtnMessage += 'i></ul><h4>Other Charges</h4><p><ul><li>$100 ';
rtnMessage += 'dollar deposit to set up service</li><li>$40';
rtnMessage += ' service fee for past due accounts</li><li>If';
rtnMessage += ' a lock is cut there will be a $50 fee</li>';
rtnMessage += '<li>Other damages can be $100 dollars or more';
rtnMessage += ' depending on damage done.</li></ul></p></div>';
rtnMessage += '</div></div>';
rates.append(rtnMessage);
break;
case 'CoastalLLC5':
rtnMessage = '<div class="panel panel-success subdivision">';
rtnMessage += '<div class="panel-heading"><h3 class="panel-t';
rtnMessage += 'itle">Coastal Water Company, LLC</h3></div>';
rtnMessage += '<div class="panel-body"><ul><li>Average flat';
rtnMessage += ' rate $30.00</li></ul><h4>Other Charges</h4>';
rtnMessage += '<p><ul><li>$100 dollar deposit to set up ser';
rtnMessage += 'vice</li><li>$40 service fee for past due acco';
rtnMessage += 'unts</li><li>If a lock is cut there will be a';
rtnMessage += ' $50 fee</li><li>Other damages can be $100 ';
rtnMessage += 'dollars or more depending on damage done.</li>';
rtnMessage += '</ul></p></div></div></div>';
rates.append(rtnMessage);
break;
case 'CoastalLLC6'://where we left off
RtnMessage = '<div class="panel panel-success subdivision">';
rtnMessage += '<div class="panel-heading"><h3 class="panel-';
rtnMessage += 'title">Coastal Water Company, LLC</h3></div>';
rtnMessage += '<div class="panel-body"><ul><li>$40.00 flat ';
rtnMessage += 'rate</li></ul><h4>Other Charges</h4><p><ul>';
rtnMessage += '<li>$100 dollar deposit to set up service</li>';
rtnMessage += '<li>$40 service fee for past due accounts</li>';
rtnMessage += '<li>If a lock is cut there will be a $50 fee';
rtnMessage += '</li><li>Other damages can be $100 dollars or ';
rtnMessage += 'more depending on damage done.</li></ul></p>';
rtnMessage += '</div></div></div>';
rates.append(rtnMessage);
break;
case 'GoldenIsles':
rtnMessage = '<div class="panel panel-brian subdivision">';
rtnMessage += '<div class="panel-heading"><h3 class="panel-';
rtnMessage += 'title">Golden Isles</h3></div><br/><ul><li>';
rtnMessage += '$36.00 Flat Rate for Duplexes</li><li>$41.00 ';
rtnMessage += 'Flat Rate for Homes</li></ul><h4>Other Charges';
rtnMessage += '</h4><p><ul><li>$100 dollar deposit to set up ';
rtnMessage += 'service</li><li>$40 service fee for past due ';
rtnMessage += 'accounts</li><li>If a lock is cut there will ';
rtnMessage += 'be a $50 fee</li><li>Other damages can be $100 ';
rtnMessage += 'dollars or more depending on damage done.</li>';
rtnMessage += '</ul></p></div</div></div>';
rates.append(rtnMessage);
break;
case 'Whitemarsh':
rtnMessage = '<div class="panel panel-warning subdivision">';
rtnMessage += '<div class="panel-heading"><h3 class="panel-t';
rtnMessage += 'itle">Whitemarsh Estates</h3></div><div class="';
rtnMessage += 'panel-body"><ul><li>$34.00 up to 5,000 gallons';
rtnMessage += '</li><li>$2.50 per 1,000 after 5,000 used</li>';
rtnMessage += '</ul><h4>Other Charges</h4><p><ul><li>$100 ';
rtnMessage += 'dollar deposit to set up service</li><li>$40 ';
rtnMessage += 'service fee for past due accounts</li><li>If ';
rtnMessage += 'a lock is cut there will be a $50 fee</li>';
rtnMessage += '<li>Other damages can be $100 dollars or more ';
rtnMessage += 'depending on damage done.</li></ul></p><div>';
rtnMessage += '</div></div>';
rates.append(rtnMessage);
break;
case 'Woodlawn':
rtnMessage = '<div class="panel panel-danger subdivision">';
rtnMessage += '<div class="panel-heading"><h3 class="panel-ti';
rtnMessage += 'tle">Woodlawn</h3></div><div class="panel-';
rtnMessage += 'body"><ul><li>$34.00 up to 5,000 gallons</li>';
rtnMessage += '<li>$2.50 per 1,000 after 5,000</li></ul><h4>';
rtnMessage += 'Other Charges</h4><p><ul><li>$100 dollar ';
rtnMessage += 'deposit to set up service</li><li>$40 service';
rtnMessage += ' fee for past due accounts</li><li>If a lock ';
rtnMessage += 'is cut there will be a $50 fee</li><li>Other ';
rtnMessage += 'damages can be $100 dollars or more depending ';
rtnMessage += 'on damage done.</li></ul></p></div></div></div>';
rates.append(rtnMessage);
break;
default:
RtnMessage = "<h3>Mising Subdivision</h3>";
rates.append(rtnMessage);
}
}
else {
rates.append('');
}
});
});
Why Experts Exchange?
Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.
Jim Murphy
Programmer at Smart IT Solutions
When asked, what has been your best career decision?
Deciding to stick with EE.
Mohamed Asif
Technical Department Head
Being involved with EE helped me to grow personally and professionally.
Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question
Connect with Certified Experts to gain insight and support on specific technology challenges including:
- Troubleshooting
- Research
- Professional Opinions
Did You Know?
We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE