Question

所以我有一个视图，我在其中创建一个IEnumerable（Of SelectListItem），然后使用此列表填充Select中的选项，如下所示：

@ModelType MyModel
@Code
    ViewData("Title") = "Edit"

    Dim TypeList As IEnumerable(Of SelectListItem) = {
    New SelectListItem() With {.Value = "American", .Text = "American"},
    New SelectListItem() With {.Value = "Chinese", .Text = "Chinese"},
    New SelectListItem() With {.Value = "Mexican", .Text = "Mexican"},
    New SelectListItem() With {.Value = "Italian", .Text = "Italian"},
    New SelectListItem() With {.Value = "Japanese", .Text = "Japanese"},
    New SelectListItem() With {.Value = "Sandwich", .Text = "Sandwich"},
    New SelectListItem() With {.Value = "BBQ", .Text = "BBQ"},
    New SelectListItem() With {.Value = "Other", .Text = "Other"}
}
End Code

<h2>Edit MyModel</h2>

@Using (Html.BeginForm("Edit", "MyModel", FormMethod.Post, New With {.name = "frmEditMyModel", .id = "frmEditMyModel"}))
    @Html.AntiForgeryToken()

    @<div class="form-horizontal">
        <hr />
        <div class="text-danger">@(ViewData("mmError"))</div>
        @Html.HiddenFor(Function(model) model.ID)

......
        <div class="form-group" id="typecombo">
            @Html.LabelFor(Function(model) model.Type, htmlAttributes:=New With {.class = "control-label col-md-2"})
            <div class="col-md-10">
                <select class="form-control">
                    @For Each item In TypeList
                        @<option>@item.Text</option>
                    Next
                </select>
                @Html.HiddenFor(Function(model) model.Type, New With {.id = "type"})
                @Html.ValidationMessageFor(Function(model) model.Type, "", New With {.class = "text-danger"})
            </div>
        </div>
        <div class="form-group" id="typebox">
            <div class="col-md-2 col-xs-2" style="text-align:right"></div>
            <div class="col-md-10 col-xs-10">
                @Html.EditorFor(Function(model) model.Type, New With {.htmlAttributes = New With {.class = "form-control"}})
            </div>
        </div>
.......

    </div>  End Using

因此，对于已经存在的内容，这是一个Edit页面，我希望select元素选择等于MyModel.Type的选项。最重要的是，如果type是“Other”，则显示用户可以在其中键入内容的文本框。所以这是我的jquery：

@Section Scripts 
    @Scripts.Render("~/bundles/jqueryval")

<script>
    $(function () {

        // First see if the current 'type' is in the dropdown options or not
        var exists = false;
        var curType = "@Model.Type";
        $('#typecombo option').each(function () {
            if (this.Text == curType) {
                exists = true;
                $("#typecombo select").val(curType).change();
            }
        });
        if (exists == false) {
            $("#typecombo select").val("Other").change();
        }

        // Toggle show / hide of Type textbox if selection in Type combo is 'Other'
        var selection = $('#typecombo :selected').text();
        selection.trim();
        if (selection === 'Other') {
            $('#typebox').show();
        }
        else {
            $('#typebox').hide();
        }
        $('#typecombo').change(function () {
            var selection = $('#typecombo :selected').text();
            selection.trim();
            if (selection === 'Other') {
                $('#typebox').show();
            }
            else {
                $('#typebox').hide();
            }
        })
</script>
End Section

无论出于何种原因，它都没有找到已存在的价值。我尝试在页面打开时显示@ Model.Type的警报 - 显示正确。但这并不重要 - 每次，它最终将所选值设置为“其他”并显示文本框，因为它没有在Select中找到它作为选项。为什么？

Answer 1

看起来您需要更改此部分

ViewComponents _*layout.cshtml

到

        if (this.Text == curType) {
            exists = true;
            $("#typecombo select").val(curType).change();
        }

Javascript是区分大小写的。注意这个。 DOM元素属性的名称为if (this.text == curType) { exists = true; $("#typecombo select").val(curType).change(); }

mvc jquery在select元素中找不到选项

1 个答案: