CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Keith D Kaiser
Keith D Kaiser

Reputation: 1036

Using onChange in bootstrap multiselect

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>

Upvotes: 10

Views: 26557

Answers (3)

devendra
devendra

Reputation: 137

<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>

Upvotes: 1

Keith D Kaiser
Keith D Kaiser

Reputation: 1036

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

Upvotes: 3

Keith D Kaiser
Keith D Kaiser

Reputation: 1036

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

Upvotes: 11

Related Questions