如何顯示/隱藏具有多個選擇選項的div

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();的意圖是要做到這一點，但是你絕不會將非選中的類應用到任何國家的div。

也許一個簡單的方法是在每次更改時調用所有國家div的hide（）函數。

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

Answer 2

你的代碼應該是這個樣子的

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