Javascript 显示/隐藏切换不使用数据库输出的选择名称

这一点最初是在今天早上指出的，但后来我不得不向select元素添加

name=“region\u option”

，以便它将值输出到SQL查询中。数据库/查询的东西都很好，但是我无法让显示/隐藏再次与区域正常工作。我一直在使用

select

并使用

name=“region\u选项”

使其正常工作

我很想知道我缺少了什么来修复这个问题，以及为什么它一开始就不起作用。为了方便起见，我冒昧地把它放在一个盒子里

---

提前感谢。

您有一个

class=country\u选项的选择器，而实际上它是
name=country\u选项

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

试一试

JSFiddle：

或者更好（更明显）：

这就解决了问题。我想，在这件事上多看一眼总是有帮助的。非常感谢你！
$(document).ready(function(){
  $('#England, #Scotland, #Ireland, #Wales').hide();

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

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

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