twitter-bootstrap 在引导多选中使用 onChange
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33286186/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using onChange in bootstrap multiselect
提问by Keith D Kaiser
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 onChangeevent to make this work.
Would someone please show me the correct syntax.
我正在尝试使用引导程序多选通过 jQuerytoggle()函数设置表中某些列的可见性。对于下拉列表中选择的每一列，我想根据是否选择显示或隐藏它。但我显然不明白如何使用onChange事件来完成这项工作。有人请告诉我正确的语法。
My javascript and HTML is as follows:
我的 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>
采纳答案by Keith D Kaiser
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(); }
}
}
回答by Keith D Kaiser
I changed the onChangeas follows. Now it fires but it only works for the first selection instead of for each selection.
我改变了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(); }
}
}
回答by devendra
<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>
