在 laravel 刀片中的下拉选择事件中未打开模态答案

【问题标题】：Modal not opening on dropdown select event in laravel blade在 laravel 刀片中的下拉选择事件中未打开模态
【发布时间】：2021-10-24 11:00:12
【问题描述】：

在我的 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>

但它没有打开模式，甚至没有在控制台中显示任何错误......

【问题讨论】：

id 总是使用 # 获取，然后是 id 属性。例如#Admin 将下拉选项值设置为 #Admin，反之亦然

标签： php jquery laravel bootstrap-4

【解决方案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>

【讨论】：