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>

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>

• javascript
• jquery
• html
• twitter-bootstrap

• Is "OnChange" event triggering or not? – Kundan Singh Chouhan Commented Oct 22, 2015 at 16:51
• Please describe more fully what you see when you try this. Maybe set up a jsfiddle to demonstrate. – J E Carter II Commented Oct 22, 2015 at 17:36
• As far as I can tell the "OnChange" event is not triggering at all. I put an alert in it and nothing happens. – Keith D Kaiser Commented Oct 22, 2015 at 19:14
• I changed the 'OnChange' to look like this. Now it fires but it only works for the first option selected, not each option selected. – Keith D Kaiser Commented Oct 22, 2015 at 20:34

3 Answers 3

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(); }           
            }
        }

I changed the onChange as follows. Now it fires but it only works for the first selection instead of for each selection.

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(); }
    }
}

<script type="text/javascript">
    $(function () {
       $("#showops").change(function () {
        var selectedText = $(this).find("option:selected").text();
        var selectedValue = $(this).val();
        alert("Selected Text: " + selectedText + " Value: " + selectedValue);
    });
});
</script>