javascript - Issue with jQuery Dropdown -
i have simple website has select
menu.
when select usa
in dropdown secondary dropdown appears called state
.
when select georgia
should show georgia
entries, however, doesn't work. can show me how fix 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 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 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>
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 fiddle
Comments
Post a Comment