MVC jQuery將找不到選項

-1

所以我在我創建一個IEnumerable（中SelectListItem），然後使用這個列表來填充選項的選擇，像這樣一個觀點：MVC jQuery將找不到選項

@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元素具有與MyModel.Type相同的選項。最重要的是，如果type是「其他」，則顯示用戶可以在其中輸入內容的文本框。所以這裏是我有的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的警報 - 正確顯示。但這並不重要 - 每次它最終都會將所選值設置爲「其他」並顯示文本框，因爲它沒有在選擇中找到它作爲選項。爲什麼？？

來源

2017-04-23 Andarta

只需使用'@ Html.DropDownListFor（Function（model）model.Type，TypeList）'並刪除@ Html.HiddenFor（）和@ Html.EditorFor（） 'Type' - 你的腳本不需要選擇正確的選項。如果您希望文本框添加其他值，請將其綁定到其他屬性 –

看起來像你需要這部分

 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

來源

2017-04-23 23:02:58

@charlietfl jQuery適用於DOM元素，而不適用於模型 –

MVC jQuery將找不到選項

回答

相關問題