模式没有打开下拉选择事件在laravel叶片

Question

在我的laravel应用程序中，我在表单中有一个带有三个选项的下拉菜单。

我通过控制器通过DB加载表单选项。

{{ Form::select('roles', $roles , $userRole,array('class' => 'form-control txt_txt','id'=>'chgRole')) }}

它会渲染如下内容，

<select class="form-control txt_txt" id="chgRole" name="roles">
<option value="Admin">Admin</option>
<option value="Regional Admin">Regional Admin</option>
<option value="User" selected="selected">User</option>
</select>

现在我想在用户从下拉菜单中选择'Admin'选项时显示一个带有消息的模态。

这是我到目前为止所做的…

<script>
jQuery("#chgRole").on("change", function() {
var sOptionVal = jQuery(this).val();
if (/modal/i.test(sOptionVal)) {
var $selectedOption = jQuery(sOptionVal);
$selectedOption.modal('show');
}
});
</script>
<div id="Admin" 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">Role is changing to Admin</h4>
</div>
<div class="modal-body info">
<p>Message 
</p>
</div>
<div class="modal-footer addHEIGHT">
</div>
</div>
</div>
</div>

但是它没有打开模态或者甚至没有在控制台中显示任何错误…

Answer 1

正如Hassan在评论中提到的，你需要传递#来获取ID

由于您正在从数据库中加载选项值，我建议执行以下操作:

模态

<div id="Admin" 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">Role is changing to Admin</h4>
</div>
<div class="modal-body info">
<p>Message 
</p>
</div>
<div class="modal-footer addHEIGHT">
</div>
</div>
</div>
</div>

然后把JQuery改成这个

<script>
$("#chgRole").on("change", function() {
var sOptionVal =$(this).val();
if(sOptionVal=='Admin'){
$( '#Admin' ).modal('show');
}
});
</script>

一定要包括

<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>