Question

我一直在使用jQuery对HTML5表单进行排序，以根据选择菜单中的选定值显示/隐藏div。但是我遇到了一个问题，如果选择了一个选项，然后它被更改，原来的选择及其div不被隐藏，新的选择被添加到页面，如果用户生成多个选择菜单在选择菜单中更改他们的选择。我希望有一双新眼睛可以提供帮助，并指出解决方案，因为我希望根据价值显示/隐藏div，或者根本不选择它。

HTML代码

<div class="country">
  <h1>Pick country</h1>
  <select class="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">
  <p>Please select a country to be able to pick the region.</p>
</div>

<div class="england" id="england">
  <h3>Pick region in England</h3>
  <select>
    <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="scotland" id="scotland">
  <h3>Pick region in Scotland</h3>
  <select>
    <option value="North">North</option>
    <option value="South">South</option>
  </select>
</div>

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

<div class="wales" id="wales">
  <h3>Pick region in Wales</h3>
  <select>
    <option value="North">North</option>
    <option value="South">South</option>
  </select>
</div>

jQuery代码

$(document).ready(function(){
  $('.england, .scotland, .ireland, .wales').hide();

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

或者，这是CodePen link。我期待有人在此刻指出明显或不太明显的解决方案。

Answer 1

您实际上还没有在更改功能中包含任何隐藏div的代码。我想$('.not-selected').hide();的意图是这样做，但你永远不会将.not-selected类应用于任何国家div。

也许一个简单的方法是在每次更改时调用所有国家/地区div上的hide（）函数。

$(document).ready(function(){        
  $('.country_option').change(function() {
    $('.england, .scotland, .ireland, .wales').hide();
    $('#' + $(this).val()).show();
  });
});

Answer 2

您的代码应如下所示

＆＃13;

$(document).ready(function(){
  
$('.england, .scotland, .ireland, .wales').hide();
  $('.country_option').change(function() {
    $('.england, .scotland, .ireland, .wales').hide();
  $('.not-selected').hide();
  $('#' + $(this).val()).show();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="country">
  <h1>Pick country</h1>
  <select class="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">
  <p>Please select a country to be able to pick the region.</p>
</div>

<div class="england" id="england">
  <h3>Pick region in England</h3>
  <select>
    <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="scotland" id="scotland">
  <h3>Pick region in Scotland</h3>
  <select>
    <option value="North">North</option>
    <option value="South">South</option>
  </select>
</div>

<div class="ireland" id="ireland">
  <h3>Pick region in Ireland</h3>
  <select>
    <option value="Northern">Northern</option>
    <option value="Republic">Republic</option>
  </select>
</div>

<div class="wales" id="wales">
  <h3>Pick region in Wales</h3>
  <select>
    <option value="North">North</option>
    <option value="South">South</option>
  </select>
</div>

＆＃13;

如何使用多个选择选项显示/隐藏div

2 个答案: