单击时将数据传递到包含 bootstrap-select 的 bootstrap 模式

Question

我是 jQuery 的新手，目前正在尝试将数据传递给包含 bootstrap-select 的 bootstrap 模式（Silvio Moreto）。我已经阅读了文档并尝试做我从文档中理解的事情，但似乎我所做的一切都没有按照我的理解工作。

场景如下，我的页面加载了通过 PHP Laravel 从数据库检索的数据。在该页面中，有一个用于编辑的编辑按钮。编辑按钮将在单击时加载包含输入文本和 select 选项的模式。

这是页面代码片段：-

@foreach ($cklist as $key=>$cklst)
@if (strtoupper($sort->sectionFK)==strtoupper($cklst->schSectionFK))

<?php $index++; ?>
    <tr>
        <!-- Task Name -->
        <td class="table-text"  width="10px">
            <div>{{$index }}</div>
        </td>
        <td class="table-text">
            <div>{{strtoupper($cklst->clQuestion)}}</div>
        </td>
        <td>
           <!----- Edit Question Item Button ----->
            <button type="button" data-toggle="modal" data-target=".qs-item-modal-lg" data-question="{{$cklst->clQuestion}}" data-question-id="{{$cklst->cklistPK}}" data-question-severity-id="{{$cklst->severityFK}}" @foreach ($svrity as $key=>$slct2)
                @if ($slct2->severityPK == $cklst->severityFK)
                data-question-severity-txt="{{$slct2->severityName}}"
                @endif
            @endforeach 
            class="btn btn-warning">Edit</button>
        </td>
        <td align="center" width="10px">
            <form action="{{ url('addref/'.$cklst->cklistPK) }}" method="POST">
                {{ csrf_field() }}
                <input type="hidden" name="schemeID" value="{{$id}}">
                <input type="hidden" name="cklistID" value="{{$cklst->cklistPK}}">
                <button class="btn btn-info" type="submit">Get Reference</button>
            </form>
        </td>
        <td align="center"  width="10px">
            <form action="{{ url('delcheck/'.$cklst->cklistPK) }}" method="POST" class="delete">
                {{ csrf_field() }}
                {{ method_field('DELETE') }} 
                <button class="btn btn-danger" type="submit">Delete</button>
            </form>
        </td>
    </tr>
@endif
@endforeach

编辑按钮将打开一个 bootstrap 模式（位于同一页面）以编辑该特定记录。模态代码片段：-

<!----- Edit Question Item Modal ----->
<div class="modal fade qs-item-modal-lg" id="editqstn" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myLargeModalLabel">Edit Question Item</h4>
            </div>
            <form action="{{url('editquestion')}}" method="POST">
                {{ csrf_field() }}
                {{ method_field('PUT') }} 
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="text-left">
                                <div class="col-sm-8">
                                    <h4>
                                        <label>Question Name</label>
                                        <input type="text" class="form-control" name="selectedquestion" value="">
                                        <input type="hidden" name="selectedquestionID" value="">
                                    </h4>
                                </div>
                                <div class="col-sm-4">
                                    <h4>
                                        <label>Severity</label>
                                        <select class="selectpicker form-control" id="svrty" name="selectedquestionSvrty">
                                            <option selected value=""></option>
                                            @foreach ($svrity as $key=>$slct2)
                                            <option value="{{$slct2->severityPK}}">{{strtoupper($slct2->severityName)}}</option>
                                            @endforeach
                                        </select>
                                    </h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

和 jQuery 用于将数据传递给模态：-

$("#editqstn").on("show.bs.modal", function (e) {

        //get data-question attributes of the clicked element
        var slctqstn = $(e.relatedTarget).data('question');
        var slctqstnid = $(e.relatedTarget).data('question-id');
        var slctqstnsvrty = $(e.relatedTarget).data('question-severity');
        var slctqstnsvrtytxt = $(e.relatedTarget).data('question-severity-txt');

        //populate the input
        $(e.currentTarget).find('input[name="selectedquestion"]').val(slctqstn);
        $(e.currentTarget).find('input[name="selectedquestionID"]').val(slctqstnid);

        $('.selectpicker').on('change', function(e){
            //populate the bootstrap-select selected value
            $(e.currentTarget).find('#svrty').selectpicker('val', slctqstnsvrty);
            //populate the bootstrap-select selected string text
            $(e.currentTarget).find('#svrty').text(slctqstnsvrtytxt).selectpicker('render');
        });
    });

我已经测试了代码，输入字段的数据已成功传递，但 select 字段的数据未成功传递。因此，如果用户不打算编辑它们，我无法提供它们当前的 selected 数据。所以我想知道我的代码有什么问题，希望这里有人能够监督它。

Answer 1

如果您想在模态渲染上动态填充 selectpicker 值，则可以使用另一种方法。您可以在基础 select 字段上使用 .val() 函数，然后刷新选择器实例。

$("#editqstn").on("show.bs.modal", function (e) {

    //get data-question attributes of the clicked element
    var slctqstn = $(e.relatedTarget).data('question');
    var slctqstnid = $(e.relatedTarget).data('question-id');
    var slctqstnsvrty = $(e.relatedTarget).data('question-severity');
    var slctqstnsvrtytxt = $(e.relatedTarget).data('question-severity-txt');

    //populate the input
    $(e.currentTarget).find('input[name="selectedquestion"]').val(slctqstn);
    $(e.currentTarget).find('input[name="selectedquestionID"]').val(slctqstnid);

    // Yu don't need this part
    /*
    $('.selectpicker').on('change', function(e){
        //populate the bootstrap-select selected value
        $(e.currentTarget).find('#svrty').selectpicker('val', slctqstnsvrty);
        //populate the bootstrap-select selected string text
        $(e.currentTarget).find('#svrty').text(slctqstnsvrtytxt).selectpicker('render');
    });
    */
    // Instead you can use the following-
    $(e.currentTarget).find('#svrty').val(slctqstnsvrty).selectpicker('refresh');
});

注意： 我发现在 IDs、classes、variables 等中使用描述性名称在我尝试调试和由于易于队友阅读和理解，因此也在进一步开发中。尽管有时我一个人工作，但描述性名称可以帮助我轻松解析代码。

更新

你犯了一个非常愚蠢的错误。在您的编辑按钮中，您有一个 data-question-severity-id 属性，但在 show.bs.modal 事件回调中，您正试图通过 $(e.relatedTarget).data('question-severity') 访问它。您的按钮中没有任何 data-question-severity，但 data-question-severity-id。更新它使它工作。

整个代码片段如下-

jQuery(document).ready(function($) {

  $('.selectpicker').selectpicker({
    style: 'btn-info',
    size: 4
  });
  
  $("#editqstn").on("show.bs.modal", function(e) {

    //get data-question attributes of the clicked element
    var slctqstn = $(e.relatedTarget).data('question');
    var slctqstnid = $(e.relatedTarget).data('question-id');
    var slctqstnsvrty = $(e.relatedTarget).data('question-severity-id');
    var slctqstnsvrtytxt = $(e.relatedTarget).data('question-severity-txt');

    //populate the input
    $(e.currentTarget).find('input[name="selectedquestion"]').val(slctqstn);
    $(e.currentTarget).find('input[name="selectedquestionID"]').val(slctqstnid);
    $(e.currentTarget).find('#svrty').val(slctqstnsvrty).selectpicker("refresh");

  });

});

<link href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<button type="button" data-toggle="modal" data-target=".qs-item-modal-lg" data-question="Question 1" data-question-id="123" data-question-severity-id="2" data-question-severity-txt="Severe 2" class="btn btn-warning">Edit</button>

<div class="modal fade qs-item-modal-lg" id="editqstn" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title" id="myLargeModalLabel">Edit Question Item</h4>
      </div>
      <form action="{{url('editquestion')}}" method="POST">
        <div class="modal-body">
          <div class="row">
            <div class="col-sm-12">
              <div class="text-left">
                <div class="col-sm-8">
                  <label>Question Name</label>
                  <input type="text" class="form-control" name="selectedquestion" value="">
                  <input type="hidden" name="selectedquestionID" value="">

                </div>
                <div class="col-sm-4">
                  <label>Severity</label>
                  <select class="selectpicker form-control" id="svrty" name="selectedquestionSvrty">
                    <option selected value=""></option>
                    <option value="1">Severe 1</option>
                    <option value="2">Severe 2</option>
                    <option value="3">Severe 4</option>
                  </select>

                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Save changes</button>
        </div>
      </form>
    </div>
  </div>
</div>

在此处勾选 fiddle。 https://jsfiddle.net/fm503fh9/9/

单击时将数据传递到包含 bootstrap-select 的 bootstrap 模式

Pass data to a bootstrap modal that contain bootstrap-select upon click

jquery

twitter-bootstrap

bootstrap-select