如何显示/隐藏具有多个选择选项的div

我一直在用jQuery对HTML5表单进行排序，以根据选择菜单中的选定值显示/隐藏div。不过，我遇到了一个问题，如果选择了一个选项，那么它会被更改，原始选择与它的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。我期待任何人指出目前明显或不太明显的解决方案，以解决我的难题。

来源

2014-09-23 j_mes

我写FieldState（http://mitya.co.uk/fieldState）只是这种情景 - 避免凌乱DOM-逻辑。下面是一个用于你的例子的Codepen：http://codepen.io/anon/pen/eHKgr – Utkanos 2014-09-23 10:48:19

你实际上并没有在你的更改函数中包含任何代码来隐藏div。我猜$('.not-selected').hide();的意图是要做到这一点，但是你绝不会将非选中的类应用到任何国家的div。

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

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

来源

2014-09-23 10:41:16

我真的很喜欢你如何回答我的问题，你已经指出我出错的地方，并提供解决方案，而不是用代码轰炸并没有真正解释任何东西。 – 2014-09-23 10:53:26

你的代码应该是这个样子的

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

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

来源

2014-09-23 10:43:45

如何显示/隐藏具有多个选择选项的div

回答

相关问题