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

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

由于这是一个已经存在的编辑页面，我希望 select 元素具有选项 selected，等于 MyModel.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 的警报 - 显示正确。但这没关系 - 每次，它最终都会将 selected 值设置为 "Other" 并显示文本框，因为它没有在 Select 中找到它作为选项。为什么？？

Answer 1

看来您需要更改此部分

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

至

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

Javascript 区分大小写。注意这一点。 DOM 元素属性的名称为 text

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

mvc jquery won't find option in select element

asp.net-mvc

jquery

html-select