分層窗體和輸入

Question

我在頁面上有幾個過濾器，我希望根據用戶選擇隱藏一些輸入。

因爲我已經使用地區和國家，如果選擇EMEA的例子中，當點擊提交，我想第二個過濾器只提供英國和法國，成爲可能的選擇。但是，如果法國直接從第二個過濾器提交，我不想隱藏區域過濾器上的值。

所以我能夠獲得地區濾波器的值，但我並不怎麼使用過濾國家...

HTML：

<div id="filter1"> 
<form action='#'> 
<legend>Region</legend> 
<input type="checkbox" value="all" class="select-all" checked>(All)<br> 
<input type="checkbox" value="americas" class="checkboxlistitem americas" checked>Americas<br> 
<input type="checkbox" value="apac" class="checkboxlistitem apac" checked>APAC<br> 
<input type="checkbox" value="emea" class="checkboxlistitem emea" checked>EMEA<br> 
<input type="submit" value="Apply"> 
</form> 
</div> 

<div id="filter2"> 
<form action='#'> 
<legend>Country</legend> 
<input type="checkbox" value="all" class="select-all" checked>(All)<br> 
<input type="checkbox" value="us" class="checkboxlistitem americas" checked>US<br> 
<input type="checkbox" value="uk" class="checkboxlistitem emea" checked>UK<br> 
<input type="checkbox" value="india" class="checkboxlistitem apac" checked>India<br> 
<input type="checkbox" value="france" class="checkboxlistitem emea" checked>France<br> 
<input type="submit" value="Apply"> 
</form> 
</div> 

JS：

// Hide none relevant items 
$("[type='submit']").click(function(event){ 
event.preventDefault(); 
var checkedValue = $("[type='checkbox']:checked", $(this).parent()).map(function(){ 
    return $(this).val(); 
}).get(); // 
var filterName = $(this).closest('div').attr('id'); 
alert(checkedValue); 
alert(filterName); 
}); 

的jsfiddle：

https://jsfiddle.net/Max06270/jutx6snm/

由於提前，最大

Answer 1

你可以做這樣的事情在這裏https://jsfiddle.net/jutx6snm/11/