Question

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

<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() {的选择器。

尝试

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

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

或者更好（更明显）：

{{1}}

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

1 个答案: