Проблема с jQuery Dropdown

Question

У меня очень простой сайт с меню select.

Когда я выберет USA, в раскрывающемся списке появится всплывающее окно со ссылкой State.

Когда я выбираю Georgia, он должен показывать только записи Georgia, однако это не сработает. Может кто-нибудь покажет мне, как я исправляю эту ошибку?

Демо: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> 
 

 
\t <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> 
 

 
\t <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> 
 
\t 
 

 
</fieldset> 
 
</form> 
 

 
<ul class="countries"> 
 

 
<li class="usa"> 
 

 
<h2>USA</h2> 
 

 
<ul class="companies"> \t 
 

 
<li class="company-listing" id="post-1248"> 
 
\t 
 
\t <h4>New York Test</h4> 
 

 
\t <div class="row"> 
 
\t \t <div class="medium-6 columns"> 
 

 
      <dl class="company-data"> 
 
      \t <dt>Address:</dt> 
 
      \t <dd>New York Test</dd> 
 

 
      \t <dt>Country:</dt> 
 
      \t <dd> USA</dd> 
 

 
      \t <dt>URL:</dt> 
 
      \t <dd> <a href=""></a></dd> 
 

 
      \t <dt>Telephone:</dt> 
 
      \t <dd> </dd> 
 

 
      \t <dt>Fax:</dt> 
 
      \t <dd> \t \t \t \t \t \t \t    
 
      </dl> 
 

 
     </div> 
 

 
</li> 
 

 
    
 
<li class="company-listing" id="post-1247"> 
 
\t 
 
\t <h4>Georgia Test</h4> 
 

 
\t <div class="row"> 
 
\t \t <div class="medium-6 columns"> 
 

 
      <dl class="company-data"> 
 
      \t <dt>Address:</dt> 
 
      \t <dd>Georgia</dd> 
 

 
      \t <dt>Country:</dt> 
 
      \t <dd> USA</dd> 
 

 
      \t <dt>URL:</dt> 
 
      \t <dd> <a href=""></a></dd> 
 

 
      \t <dt>Telephone:</dt> 
 
      \t <dd> </dd> 
 

 
      \t <dt>Fax:</dt> 
 
      \t <dd> 
 
      </dl> 
 
     </div> 
 

 
</li> 
 

 
</ul> 
 

 
</li> 
 

 
</ul>

Answer 1

Вы можете попробовать это:

<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(); 
}); 

Проверить эту fiddle

Answer 2

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. 

Answer 3

Похоже, что у вас не было классов по всем элементам.

Но вы должны реализовать что-то, что легко добавить, без необходимости менять код.

Когда скрытие/показ, как это, я думаю, что это слово лучше всего сделать следующее:

• Дайте элементы, которые могут быть скрыты/показан как класс и идентификатор.
• Вызовите обработчики событий изменений для выбора при загрузке страницы, чтобы они соответствующим образом обновили отображение.
• Обработчик события изменения для выбора страны должен инициировать событие изменения для выбора состояния, поэтому он скрывает/показывает элементы соответственно.

уменьшенную 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