Иерархическая форма и ввод

Question

У меня есть фильтры фильтров на моей странице, и я хотел бы, чтобы некоторые входы были скрыты в зависимости от выбора пользователя.

Для примера я использовал регион и страну. Если выбран вариант EMEA, при нажатии кнопки «Отправить», я бы хотел, чтобы второй фильтр предлагал только Великобританию и Францию ​​в качестве возможных вариантов. Однако, если Франция отправляется напрямую со второго фильтра, я не хочу скрывать значения в фильтрах Region.

Так что я могу получить значения области фильтра, но я не знаю, как использовать, чтобы отфильтровать страны ...

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/

Спасибо заранее, Max

Answer 1

Вы можете сделать что-то вроде этого

$("#region").click(function(event) { 
    event.preventDefault(); 
    $('#filter1 input').each(function() { 
    var value = $(this).val(); 
    var checkbox = $("#filter2 input[region=" + value + "]"); 
    if($(this).is(':checked')){ 
     checkbox.prop('checked', true).show(); 
     checkbox.closest('label').show(); 
    }else{ 
     checkbox.prop('checked', false).hide(); 
     checkbox.closest('label').hide(); 
    } 
    }); 
}); 

Полный пример здесь https://jsfiddle.net/jutx6snm/11/