Issue with jQuery Dropdown

Question

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&#8230;</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&#8230;</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>

I see that you reference to .0 class while in your html you have level-0 class. Am I missing something? — user2399035
– user2399035, Commented Apr 29, 2015 at 16:50
@LelioFaieta I'm sorry, I don't follow. Where do I reference .0? — michaelmcgurk
– michaelmcgurk, Commented Apr 29, 2015 at 16:53
jQuery('.' + val).show(); val is 0 so you are looking to show an element with class 0 that is not in the DOM. Maybe I am wrong reading your code anyway! — user2399035
– user2399035, Commented Apr 29, 2015 at 16:55
Apart from the mistake @LelioFaieta mentions, in your fiddle I cannot see any element with class state1. — kasimoglou
– kasimoglou, Commented Apr 29, 2015 at 16:58
I don't see how the new york entries are differentiated from the georgia ones. — jhansen
– jhansen, Commented Apr 29, 2015 at 16:59

brso05 · Accepted Answer · 2015-04-29 17:01:42Z

1

You can try this:

<li class="company-listing" id="ny">
<li class="company-listing" id="ga">


jQuery('#statecat').change(function() {
    jQuery('.company-listing').hide();
    jQuery('#' + jQuery(this).val()).show();
});

Check out this fiddle

answered Apr 29, 2015 at 17:01

brso05

13.3k2 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

michaelmcgurk Over a year ago

If I have multiple entries inside ny, should I change it to a class?

michaelmcgurk Over a year ago

Working much better now : jsfiddle.net/h0pkf541/6 One small comment. When I click Georgia then click Choose a state... it goes blank. Should it not show all my entries at that point?

brso05 Over a year ago

@michaelmcgurk that is really up to you...It depends on how you look at it if "blank" means display all then your ok if "blank" means display none then you should default them to hidden.

michaelmcgurk Over a year ago

Cool. I'd rather when I hit Choose a state... that it displayed all my results.

Dirty Developer · Accepted Answer · 2015-04-29 17:09:11Z

1

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.

answered Apr 29, 2015 at 17:09

Dirty Developer

5726 silver badges24 bronze badges

Comments

John S · Accepted Answer · 2015-04-29 17:34:51Z

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&#8230;</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&#8230;</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();

jsfiddle

Collectives™ on Stack Overflow

Issue with jQuery Dropdown

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related