JQuery show/hide checkbox list by Select Option Changes
JQuery show/hide checkbox list by Select Option Changes
HTML
<span style="float:right;">
<label>Filter</label>
<select id="travel-settings" name="travOptions"><option value="00">All</option>
<option value="05">Hotel</option>
<option value="10">Airport</option>
<option value="15">Car hire</option>
<option value="20">Other Options</option>
</select>
</span>
<!-- List below -->
<div name="travelOptionList">
<div data-custom-type="00">
<input type="checkbox" name="travelOption" id="trv_0000" value="0000" /> <label for="trv_0000">All</label>
</div>
<div data-custom-type="05">
<input type="checkbox" name="travelOption" id="trv_0010" value="0010" /> <label for="trv_0010">Hotel</label>
</div>
<div data-custom-type="08">
<input type="checkbox" name="travelOption" id="trv_0020" value="0020" /> <label for="trv_0020">Other Options</label>
</div>
<div data-custom-type="05">
<input type="checkbox" name="travelOption" id="trv_0011" value="0011" /> <label for="trv_0011">Hotel / BnB</label>
</div>
<div data-custom-type="10">
<input type="checkbox" name="travelOption" id="trv_0014" value="0014" /> <label for="trv_0014">MEX DF</label>
</div>
<div data-custom-type="20">
<input type="checkbox" name="travelOption" id="trv_123" value="123" /> <label for="trv_123">Meal Type</label>
</div>
<div data-custom-type="20">
<input type="checkbox" name="travelOption" id="trv_124" value="124" /> <label for="trv_124">Wheel Chair</label>
</div>
</div>
JavaScript
$('#travel-settings').change(function(){
var sel = $(this).val();
$('div[name="travelOptionList"] div').hide();
$('div[data-custom-type="00"]').show();
});