Question

我尝试使用bootstrap multiselect通过jQuery toggle()函数设置表中某些列的可见性。对于在下拉列表中选择的每个列，我想要显示或隐藏它，具体取决于它是否被选中。但我显然不明白如何使用onChange事件来完成这项工作。有人请告诉我正确的语法。

我的javascript和HTML如下：

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

Answer 1

这解决了它。

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

Answer 2

我更改了fn x => x) 5.0，如下所示。现在它会触发，但它只适用于第一次选择而不是每次选择。

onChange

Answer 3

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

在bootstrap multiselect中使用onChange

3 个答案: