michaelmcgurk
Reputation: 6509
Issue with jQuery Dropdown
I have a very simple website that has a select menu.
When I select USA in the dropdown a secondary dropdown appears called State.
When I select Georgia it should only show the Georgia entries, however, this doesn't work. Can someone show me how I fix this bug?
Demo: http://jsfiddle.net/28zwwwsw/
jQuery('#cat').change(function () {
var val = jQuery(this).val();
jQuery("#statecat").toggle(val == "usa");
if (val == "0")
jQuery('#countries_select').siblings('div').show();
else {
jQuery('form').siblings('div').hide();
jQuery('.' + val).show();
}
});
jQuery('#statecat').change(function() {
jQuery('.state1').hide();
if(jQuery(this).val() == '0'){
jQuery('.state1').show();
}else{
jQuery('.' + jQuery(this).val()).show();
}
});
jQuery("#countries_select select").change(function(){
if( jQuery(this).val() == "usa"){
jQuery("#state_select").show();
} else {
jQuery("#state_select").hide();
}
if(jQuery(this).val() == '0'){
jQuery("ul.countries > li").show()
}else{
jQuery("ul.countries > li").hide()
jQuery("ul.countries ." + jQuery(this).val() ).css("display", "block")
}
})
jQuery('#languageSwitch #cat').change(function(){
if(jQuery('#languageSwitch #cat').val()=="0")
jQuery('form').siblings('li').show();
else{
jQuery('form').siblings('li').hide();
jQuery('.'+jQuery('#languageSwitch #cat').val()).show();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form method="get" action="/" id="countries_select">
<fieldset>
<select name='cat' id='cat' class='postform' >
<option value='0' selected='selected'>Choose a country…</option>
<option class="level-0" value="united-kingdom">United Kingdom</option>
<option class="level-0" value="usa">USA</option>
</select>
</fieldset>
</form>
<form method="get" action="/" id="state_select" style="display:none;">
<fieldset>
<select name='statecat' id='statecat' class='postform' >
<option value='0' selected='selected'>Choose a state…</option>
<option class="level-0" value="ga">Georgia</option>
<option class="level-0" value="ny">New York</option>
</select>
</fieldset>
</form>
<ul class="countries">
<li class="usa">
<h2>USA</h2>
<ul class="companies">
<li class="company-listing" id="post-1248">
<h4>New York Test</h4>
<div class="row">
<div class="medium-6 columns">
<dl class="company-data">
<dt>Address:</dt>
<dd>New York Test</dd>
<dt>Country:</dt>
<dd> USA</dd>
<dt>URL:</dt>
<dd> <a href=""></a></dd>
<dt>Telephone:</dt>
<dd> </dd>
<dt>Fax:</dt>
<dd>
</dl>
</div>
</li>
<li class="company-listing" id="post-1247">
<h4>Georgia Test</h4>
<div class="row">
<div class="medium-6 columns">
<dl class="company-data">
<dt>Address:</dt>
<dd>Georgia</dd>
<dt>Country:</dt>
<dd> USA</dd>
<dt>URL:</dt>
<dd> <a href=""></a></dd>
<dt>Telephone:</dt>
<dd> </dd>
<dt>Fax:</dt>
<dd>
</dl>
</div>
</li>
</ul>
</li>
</ul>Upvotes: 0
Views: 110
Answers (3)
John S
Reputation: 21482
It looks like you did not have the classes on all the elements.
But you should implement something that is easy to add to without having to change the code.
When hiding/showing like this, I think it words best to do the following:
- Give the elements that may be hidden/shown both a class and an id.
- Call the change event handlers of the selects when the page is loaded so they update the display accordingly.
- The change-event handler for the country select should trigger the change event for the state select, so it hides/shows elements accordingly.
Scaled down HTML:
<form method="get" action="/" id="country_select">
<select name='cat' id='cat' class='postform'>
<option value='' selected='selected'>Choose a country…</option>
<option value="united-kingdom">United Kingdom</option>
<option value="usa">USA</option>
</select>
</form>
<form method="get" action="/" id="state_select" style="display:none;">
<select name='statecat' id='statecat' class='postform'>
<option value='' selected='selected'>Choose a state…</option>
<option value="ga">Georgia</option>
<option value="ny">New York</option>
</select>
</form>
<ul id="countries">
<li class="country" id="country-united-kingdom">
<h2>UNITED KINGDOM</h2>
</li>
<li class="country" id="country-usa">
<h2>USA</h2>
<ul id="states">
<li class="state" id="state-ga">Georgia Test</li>
<li class="state" id="state-ny">New York Test</li>
</ul>
</li>
</ul>
JavaScript:
jQuery('#cat').change(function () {
var val = jQuery(this).val();
// Hide all countries
jQuery(".country").hide();
// Show the selected country
if (val) {
jQuery("#country-" + val).show();
}
// Show state select if usa
$('#state_select').toggle(val == 'usa');
// Cause the states to hide/show
jQuery('#statecat').change();
}).change();
jQuery('#statecat').change(function () {
var val = jQuery(this).val();
// Hide all states
jQuery(".state").hide();
// Show the selected state
if (val) {
jQuery("#state-" + val).show();
}
}).change();
Upvotes: 1
Dirty Developer
Reputation: 562
jQuery('#statecat').change(function() {
alert(jQuery(this).val());// i have added this
jQuery('.state1').hide();
if(jQuery(this).val() == '0'){
jQuery('.state1').show();
}else{
jQuery('.' + jQuery(this).val()).show();
}
});
First of all when i alerted your code it shows value "ga" in the alert box. so the conditions you are matching might be wrong.
Also class "state1" assigned nowhere in html.
Upvotes: 1
