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&#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 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>

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

Popular posts from this blog

php - failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request -

java - How to filter a backspace keyboard input -

java - Show Soft Keyboard when EditText Appears -