如何显示/隐藏具有多个选择选项的div [英] How to show/hide divs with multiple select options

问题描述

我一直在使用jQuery对HTML5表单进行排序，以根据选择菜单中的选定值显示/隐藏div.但是我遇到了一个问题，如果选择了一个选项，则将其更改，原始选择及其div不会被隐藏，新的选择会添加到页面中，如果用户使用，则会生成多个选择菜单在选择菜单中更改其选择.我希望能有新的想法，并指出解决方案，因为我希望div根据值显示或隐藏，或者根本不选择显示.

I've been sorting a HTML5 form with jQuery to show/hide divs based on the selected value in the select menu. However I've come across a problem where if an option is selected, then it is changed, the original selection with its div is not hidden, and the new one is added to the page, and generating more than one select menu if an user changes their choice in the select menu. I'm hoping a fresh pair of eyes would help and point out the solution to this, as I would like the divs to show/hide based on the value or if it's not selected at all.

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链接.我期待着有人指出目前对我的难题的明显或不太明显的解决方案.

Alternatively, here is the CodePen link. I look forward to anyone pointing the obvious or the less obvious solution to my conundrum at the moment.

推荐答案

您实际上没有在change函数中包含任何代码，这些代码将隐藏div.我想$('.not-selected').hide();的意图是这样做的，但是您永远不要将.not-selected类应用于任何国家/地区div.

You haven't actually included any code within your change function which will hide the divs. I guess that the intention of $('.not-selected').hide();was to do this but you never apply the .not-selected class to any of the country divs.

也许一个简单的方法是每次进行更改时都在所有国家/地区的div上调用hide()函数.

Perhaps a simple method would be to call the hide() function on all the country divs every time a change is made.

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

这篇关于如何显示/隐藏具有多个选择选项的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！