javascript - 显示/隐藏切换不适用于数据库输出的选择名称

Question

最初指出了这一点并 solved今天早上，但后来我必须将 name="region_option" 添加到 select 元素，以便它将值输出到 SQL 查询中。数据库/查询的东西都很好，但是我无法让显示/隐藏再次与这些区域正常工作。我一直坚持让它与具有 name="region_option" 的 select 一起使用。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<div class="bodytype">
  <h2>Bodytype</h2>
  <input class="bodytype--owls" name="bodytype_option" type="radio" value="owls">Owls</input>
  <input class="bodytype--others" name="bodytype_option" type="radio" value="others">Others</input>
</div>

<div class="country">
  <h2>Pick country</h2>
  <select name="country_option">
    <option value="not-selected">Select the country</option>
    <option value="England">England</option>
    <option value="Scotland">Scotland</option>
    <option value="Ireland">Ireland</option>
    <option value="Wales">Wales</option>
  </select>
</div>

<div class="not-selected">
  <h2>Notice!</h2>
  <p>Please select a country to be able to pick the region.</p>
</div>

<div class="regions" id="England">
  <h3>Pick region in England</h3>
  <select name="region_option">
    <option value="North">North</option>
    <option value="South">South</option>
    <option value="East">East</option>
    <option value="West">West</option>
    <option value="Midlands">Midlands</option>
  </select>
</div>

<div class="regions" id="Scotland">
  <h3>Pick region in Scotland</h3>
  <select name="region_option">
    <option value="North">North</option>
    <option value="South">South</option>
  </select>
</div>

<div class="regions" id="Ireland">
  <h3>Pick region in Ireland</h3>
  <select name="region_option">
    <option value="Northern">Northern</option>
    <option value="Republic">Republic</option>
  </select>
</div>

<div class="regions" id="Wales">
  <h3>Pick region in Wales</h3>
  <select name="region_option">
    <option value="North">North</option>
    <option value="South">South</option>
  </select>
</div>
<br /><br />
<button class="identify__button">Identify</button>

jQuery

$(document).ready(function(){
  $('#England, #Scotland, #Ireland, #Wales').hide();

  $('.country_option').change(function() {
  $('.not-selected, #England, #Scotland, #Ireland, #Wales').hide();
  $('#' + $(this).val()).show();
  });
});

我很想知道我缺少什么来解决这个问题，以及为什么它一开始就不起作用。我冒昧地将其放在CodePen中为了方便起见。

提前致谢。

Answer 1

您有一个 class=country_option 选择器，而它实际上是 name=country_option。

尝试

$('[name="country_option"]').change(function() {

JSFiddle:http://jsfiddle.net/mvt0982x/

或者更好(更明显):

$('select[name="country_option"]').change(function() {