Question

我在MVC视图中有一个下拉列表，其中第一个选项和最后一个选项始终是

＆＃39;请选择＆＃39;和＆＃39;其他＆＃39;。

当用户选择除上述两个选项之外的任何其他选项时，弹出窗口应显示其中的部分视图并应该刷新每个选定的项目除了以上两个。

以下代码显示弹出窗口上的局部视图，但在任何其他下拉列表项时不刷新内容（除了＆＃39;请选择＆＃39;以及＆＃39;其他＆＃39;）被选中。

popover只显示所有下拉列表项目的相同内容，包括＆＃39;请选择＆＃39;和＆＃39;其他＆＃39;。

我不希望弹出来显示＆＃39;请选择＆＃39;和＆＃39;其他＆＃39;。对于其余选项，popover应根据下拉列表中的选择刷新其内容。

<div class="form-group">
            @Html.LabelFor(model => model.SelectedIncident, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.DropDownListFor(model => model.SelectedIncident, new SelectList(string.Empty, "Value", "Text"),  new {  data_toggle="popover", @class = "form-control ", @id = "IncidentId" })
                @Html.ValidationMessageFor(model => model.SelectedIncident, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group" id="divOtherIncident" style="display:none;">
            @Html.LabelFor(model => model.OtherIncident, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.EditorFor(model => model.OtherIncident, new { htmlAttributes = new { @class = "form-control", @id = "tbOtherIncident"} })             
            </div>
        </div>


        $("#IncidentId").change(function (e) {              
            var ddlVal = $("#IncidentId option:selected").val();            
            if (ddlVal == "16") {   
                $("[data-toggle='popover']").popover('destroy');
                $('#divOtherIncident').show();
            }
            if (ddlVal != "" && ddlVal != "16") {                   
                $('#divOtherIncident').hide();
                $("#tbOtherIncident").val("");
                $.ajax({
                    type: 'GET',
                    url: '@Url.Action("GetIncidentDetails")',
                    dataType: 'html',
                    data: { id: $("#IncidentId").val() },
                    success: function (data) {
                        $("[data-toggle='popover']").attr('data-content', data);                                                        
                        $("[data-toggle='popover']").popover({
                            html: true
                        }).popover('show');                         
                    },
                    error: function (ex) {
                        alert('Failed to retrieve action details' + ex);
                    }
                });
                return false;
            }
            if (ddlVal == "")
            {                   
                $("[data-toggle='popover']").popover('destroy');                    
                $('#divOtherIncident').hide();
                $("#tbOtherIncident").val("");
            }
        });

局部视图：

<div class="popover-content" >
    <div class="form-horizontal">
        <div class="form-group">
            @Html.LabelFor(m => Model.ActionTaken, new { @class = "control-label col-sm-1"})
            <div class="col-sm-9">
                @Html.DisplayFor(m => m.ActionTaken, new { @class = "form-control" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(m => Model.AdviceGiven, new { @class = "control-label col-sm-1" })
            <div class="col-sm-9">
                @Html.DisplayFor(m => m.AdviceGiven, new { @class = "form-control" })
            </div>
        </div>
    </div>
</div>

bootstrap popover不会使用下拉列表选项

0 个答案: