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