I'm trying to use bootstrap multiselect to set the visibility of some columns in a table via the jQuery toggle()
function. For each column chosen in the dropdown I want to either show or hide it depending on it being selected or not.
But I clearly do not understand how to use the onChange
event to make this work.
Would someone please show me the correct syntax.
My javascript and HTML is as follows:
<script type="text/javascript">
$(document).ready(function() {
$('#showops').multiselect({
maxHeight: 300,
buttonWidth: '150px',
includeSelectAllOption: true,
allSelectedText: 'Showing All',
onChange: function(element, checked) {
if(checked == true){
if (element == '1') { $(".toggleG").toggle(); }
else if (element == '2') { $(".toggleE").toggle(); }
}
}
});
});
</script>
<select id="showops" multiple="multiple">
<option value="1"> Show Grid </option>
<option value="2"> Show eMail </option>
<option value="3"> Show Lat/Lon </option>
<option value="4"> Show Last Name </option>
<option value="5"> Show TOD </option>
</select>
This fixed it.
onChange: function(option, checked, select) {
var opselected = $(option).val();
if(checked == true) {
if (opselected == '1') { $(".toggleG").toggle(); }
if (opselected == '2') { $(".toggleE").toggle(); }
if (opselected == '3') { $(".toggleLAT").toggle(); $(".toggleLON").toggle();}
if (opselected == '4') { $(".toggleLN").toggle(); }
if (opselected == '5') { $(".toggleTOD").toggle(); }
} else if(checked == false)
if (opselected == '1') { $(".toggleG").toggle(); }
if (opselected == '2') { $(".toggleE").toggle(); }
if (opselected == '3') { $(".toggleLAT").toggle(); $(".toggleLON").toggle();}
if (opselected == '4') { $(".toggleLN").toggle(); }
if (opselected == '5') { $(".toggleTOD").toggle(); }
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With