时间戳

首页 > 解决方案 > 在 laravel 刀片中的下拉选择事件中未打开模态

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

问题描述

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

我正在通过我的控制器通过数据库加载表单选项。

{{ 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>

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

标签： phpjquerylaravelbootstrap-4

解决方案

正如 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>

推荐阅读