我是jQuery＆amp;的新手。目前尝试测试传递数据到包含bootstrap-select的引导模式（由Silvio Moreto提供）。我已经阅读了文档，并尝试从文档中做出我理解的内容，但似乎我所做的一切都不能像我的理解那样工作。
这是场景，我已经加载了通过PHP Laravel从数据库中检索的数据的页面。在该页面中，有一个用于编辑的编辑按钮。编辑按钮将加载包含输入文本的模式，并在单击时选择选项。
以下是页面代码段： -
@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
编辑按钮将打开一个引导模式（位于同一页面中）以编辑该特定记录。模态代码片段： -
<!----- 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');
});
});
我已经测试了代码，输入字段的数据已成功通过，但没有选择字段的数据。因此，如果用户不打算编辑它们，我无法提供当前选定的数据。所以我想知道我的代码中有什么问题，并希望有人能够监督它。
答案 0 :(得分：1)
如果您想在模态渲染上动态填充selectpicker值，则可以使用其他方法。您可以在基本选择字段上使用.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>
在这里查看小提琴。 https://jsfiddle.net/fm503fh9/9/