选择列表项值不适用于 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' Truck”时，我会收到错误 The value 'Select Fleet Type,7' is not valid for Fleet Type.

我能得到一些帮助吗？谢谢！！

Answer 1

可能导致此问题的一件事是，当您从运营商类型中选择 Business 并继续提交表单时，jQuery sn-p 将填写 #Individual 中的所有空白字段但是，下拉内部#Individual 保留为Select Fleet Type，这会在表单提交到服务器时导致错误。如果是这种情况，您可以尝试将以下代码行添加到 sn-p，以便 #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());
    }
});