分层形式和输入

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

你可以这样做

$("#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/

分层形式和输入

Hierarchical form and input

html

forms

jquery

input

hierarchy