選擇列表項目值不適用於JavaScript asp mvc

Question

我有一個註冊表單。並根據個人或企業角色出現兩個不同的字段。

隱藏&顯示js工作正常。但我猜想強制在個人到企業中的所有空白字段不適用於FleetType這是模型中的Integer。但選擇Individual並填寫它的所有表單！不只是工作Business ....

我有register.cshtml：

ViewBag.NCFleetTypeList = new List<SelectListItem> 
{ 
    new SelectListItem { Text="Select Fleet Type", Value=null}, 
    new SelectListItem { Text="Car", Value="1"}, 
    new SelectListItem { Text="Cargo Van", Value="2"}, 
    new SelectListItem { Text="Pickup Truck", Value="3"}, 
    new SelectListItem { Text="10' Truck", Value="4"}, 
    new SelectListItem { Text="15' Truck", Value="5"}, 
    new SelectListItem { Text="17' Truck", Value="6"}, 
    new SelectListItem { Text="20' Truck", Value="7"}, 
    new SelectListItem { Text="26' Truck", Value="8"} 
}; 

ViewBag.CFleetTypeList = new List<SelectListItem> 
{ 
    new SelectListItem { Text="Select Fleet Type", Value=null}, 
    new SelectListItem { Text="10' Truck", Value="4"}, 
    new SelectListItem { Text="15' Truck", Value="5"}, 
    new SelectListItem { Text="17' Truck", Value="6"}, 
    new SelectListItem { Text="20' Truck", Value="7"}, 
    new SelectListItem { Text="26' Truck", Value="8"} 
}; 
<div class="form-group"> 
        <div class="col-md-10"> 
         @Html.DropDownListFor(m => m.CarrierType, ViewBag.CarrierTypeList as List<SelectListItem>, new { @class = "btn btn-primary btn-block dropdown-toggle", id = "CarrierType" }) 
        </div> 
       </div> 
       <!--Individual--> 
       <div id="Individual"> 
        <h4>Individual Information</h4> 
        <div class="form-group"> 
         <div class="col-md-10"> 
          @Html.TextBoxFor(m => m.DriverLicenseNumber, new {@class = "form-control ", placeholder = "Driver's License Number", required = "required", tabindex = 15}) 
          @Html.ValidationMessageFor(m => m.DriverLicenseNumber, null, new {@class = "text-danger"}) 
         </div> 
        </div> 
        <div class="form-group"> 
         <div class="col-md-10"> 
          @Html.TextBoxFor(m => m.VehicleRegNumber, new {@class = "form-control ", placeholder = "Vehicle Registration Number", required = "required", tabindex = 16}) 
          @Html.ValidationMessageFor(m => m.VehicleRegNumber, null, new {@class = "text-danger"}) 
         </div> 
        </div> 
        <div class="form-group"> 
         <div class="col-md-10"> 
          @Html.TextBoxFor(m => m.VehiclePlateNumber, new {@class = "form-control ", placeholder = "Vehicle Plate Number", required = "required", tabindex = 17}) 
          @Html.ValidationMessageFor(m => m.VehiclePlateNumber, null, new {@class = "text-danger"}) 
         </div> 
        </div> 
        <div class="form-group"> 
         <div class="col-md-10"> 
          @Html.TextBoxFor(m => m.VecInsNum, new {@class = "form-control ", placeholder = "Vehicle Isurance Number", required = "required", tabindex = 18}) 
          @Html.ValidationMessageFor(m => m.VecInsNum, null, new {@class = "text-danger"}) 
         </div> 
        </div> 

        <div class="form-group"> 
         <div class="col-md-10"> 
          @Html.DropDownListFor(m => m.FleetType, ViewBag.NCFleetTypeList as List<SelectListItem>, new {@class = "btn btn-primary dropdown-toggle"}) 
         </div> 
        </div> 
       </div> 
       <!--Business--> 
       <div id="Business"> 
        <h4>Business Information</h4> 
        <div class="form-group"> 
         <div class="col-md-10"> 
          @Html.TextBoxFor(m => m.DriverLicenseNumber, new {@class = "form-control ", placeholder = "Driver's License Number", required = "required", tabindex = 15}) 
          @Html.ValidationMessageFor(m => m.DriverLicenseNumber, null, new {@class = "text-danger"}) 
         </div> 
        </div> 
        <div class="form-group"> 
         <div class="col-md-10"> 
          @Html.TextBoxFor(m => m.VehicleRegNumber, new {@class = "form-control ", placeholder = "Vehicle Registration Number", required = "required", tabindex = 16}) 
          @Html.ValidationMessageFor(m => m.VehicleRegNumber, null, new {@class = "text-danger"}) 
         </div> 
        </div> 
        <div class="form-group"> 
         <div class="col-md-10"> 
          @Html.TextBoxFor(m => m.VehiclePlateNumber, new {@class = "form-control ", placeholder = "Vehicle Plate Number", required = "required", tabindex = 17}) 
          @Html.ValidationMessageFor(m => m.VehiclePlateNumber, null, new {@class = "text-danger"}) 
         </div> 
        </div> 
        <div class="form-group"> 
         <div class="col-md-10"> 
          @Html.TextBoxFor(m => m.VecInsNum, new {@class = "form-control ", placeholder = "Vehicle Isurance Number", required = "required", tabindex = 18}) 
          @Html.ValidationMessageFor(m => m.VecInsNum, null, new {@class = "text-danger"}) 
         </div> 
        </div> 

        <div class="form-group"> 
         <div class="col-md-10"> 
          @Html.DropDownListFor(m => m.FleetType, ViewBag.CFleetTypeList as List<SelectListItem>, new {@class = "btn btn-primary dropdown-toggle"}) 
         </div> 
        </div> 
       </div> 

JS我有以下幾點：

// Assuming the form has a submit button with id = "submit-btn" 
    $('#submit-btn').on('click', function() { 
     var form = $(this).closest('form'); 
     var businessDiv = form.find('#Business'); 
     // Assuming this is only required when Business is selected 
     if (businessDiv.is(':visible')) { 
      var individual = form.find('#Individual input:text'); 
      var business = businessDiv.find('input:text'); 
      for (var i = 0; i < individual.length; ++i) { 
       // Perform the required logic here. 
       // I'm just forcing all empty fields in individuals to 
       // their business counterpart 
       if (individual[i].value === "") { 
        individual[i].value = business[i].value; 
       } 
      } 
     } 
    }); 

當我選擇Individual，一切工作完美的，我可以註冊。

但是當我選擇Business，如果我從下拉列表中選擇「20' 卡車」，我得到錯誤The value 'Select Fleet Type,7' is not valid for Fleet Type.

我能得到一些幫助？謝謝!!

Answer 1

有一件事可能會導致這個問題是，當您從運營商類型中選擇Business並繼續提交表單時，jQuery代碼片段將填寫#Individual中的所有空字段，但#Individual中的下拉列表爲Select Fleet Type，並且這會在提交表單時導致錯誤到服務器，如果是這種情況，你可以嘗試添加以下幾行o F代碼的片段，使#Individual下的下拉被更新爲#Business下的下拉列表中選擇的值：

// Assuming the form has a submit button with id = "submit-btn" 
$('#submit-btn').on('click', function() { 
    var form = $(this).closest('form'); 
    var businessDiv = form.find('#Business'); 
    // Assuming this is only required when Business is selected 
    if(businessDiv.is(':visible')) { 
     var individual = form.find('#Individual input:text'); 
     var business = businessDiv.find('input:text'); 
     for(var i = 0; i < individual.length; ++i) { 
      // Perform the required logic here. 
      // I'm just forcing all empty fields in individuals to 
      // their business counterpart 
      if(individual[i].value === "") { 
       individual[i].value = business[i].value; 
      } 
     } 
     // Add the following lines 
     // let the business dropdown update the individual dropdown 
     var individualFleetSelect = $(form.find('#Individual .dropdown-toggle')); 
     var businessFleetSelect = $(form.find('#Business .dropdown-toggle')); 
     individualFleetSelect.val(businessFleetSelect.val()); 
    } 
});