我有一段代码,当选中下拉选择框中的一个选项时,会出现正确的Bootstrap窗口。然而我的脚本不易于维护。每次添加新的下拉选项时,我都需要修改我的脚本。
有什么更有效的方法来编写以下脚本?如果不需要为每个新的下拉选项和模态窗口添加内容,那将会更加有用。
$("#selectbox").change(function () {
if ($(this).val() == "#myModal") {
$('#myModal').modal('show');
}
if ($(this).val() == "#myModal2") {
$('#myModal2').modal('show');
}
if ($(this).val() == "#myModal3") {
$('#myModal3').modal('show');
}
});
<select class="form-control" id="selectbox">
<option value="#">
Find: App Support
</option>
<option value="#myModal">
Apple Pear Company
</option>
<option value="#myModal2">
Cold Brewing Company
</option>
<option value="#myModal3">
Jokers Wild Inc.
</option>
</select>
<div id="myModal1" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Apple Pear Company</h4>
</div>
<div class="modal-body info">
<p>Lorem lipsum
</p>
</div>
<div class="modal-footer addHEIGHT">
</div>
</div>
</div>
</div>
<div id="myModal2" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Cold Brewing Company</h4>
</div>
<div class="modal-body info">
<p>Lorem lipsum</p>
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>
<div id="myModal3" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Jokers Wild Inc.</h4>
</div>
<div class="modal-body info">
<p>Lorem Lipsum</p>
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>
$("#selectbox").change(function () {$($(this).val()).modal('show');})
? - Dekel