在Bootstrap多选框中使用onChange函数

Question

我正在尝试使用Bootstrap多选下拉框，并通过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>

- Keith D Kaiser

---

"OnChange"事件是否触发？ - Kundan Singh Chouhan

请更详细地描述您尝试此操作时看到的情况。也许可以设置一个jsfiddle来演示。 - J E Carter II

据我所知，“OnChange”事件根本没有触发。我在其中放了一个警告，但什么都没发生。 - Keith D Kaiser

我将 'OnChange' 更改为以下内容。现在它可以触发，但仅适用于第一个选项，而不是每个选项。 - Keith D Kaiser

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

- Keith D Kaiser

---

这确实解决了问题。谢谢。 - Keith D Kaiser

你忘记了 else if 的起始花括号。 - Sam

Answer 2

我将 onChange 改为以下内容。现在它可以触发，但它仅对第一个选择起作用，而不是每个选择。

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

- Keith D Kaiser

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>

- devendra

---

OP 询问关于 Bootstrap 多选的问题。 - Strnm

这适用于Bootstrap多选。在模板脚本被捆绑并且不应该被修改的情况下，这可能会有所帮助。 - Huy Phạm