如何根据下拉菜单Asp MVC设置与显示字段相同的隐藏字段

debugcn 发表于 Dev

金成

我有一个问题，因为当我选择Business承运人类型时，隐藏字段为空。

如果 m.somthing 在和之间Individual相同，我希望填写与BusinessOR 相同的值。individualbusiness

我有 cshtml 如下：

<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">
    <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">
    <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 完美地满足了我的需求：

function hideOnLoadCarrierType() {
    $('#Individual').hide();
    $('#Business').hide();
}

$(document).ready(function () {
    hideOnLoadCarrierType();
    $('#CarrierType').change(function () {
        var value = $(this).val();
        if (value == '1') {
            $('#Individual').show();
            $('#Business').hide();
            } else if (value == '2') {
                $('#Individual').hide();
                $('#Business').show();
            } else {
                hideOnLoadCarrierType();
            }
        });
    });

但问题是；当我填写业务信息并尝试注册（所有字段都required在模型中）时，由于Individual未设置字段而出现错误。

你能帮我吗？谢谢！

静态小猎犬

您可以尝试为表单编写事件处理程序并在提交表单之前执行您需要的任何逻辑。在下面的代码段中，我在提交表单时Individuals用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;
            }
        }
    }
});

演示
下面是代码的现场演示，其中包含呈现的 HTML 应该是什么样子的粗略草图：http :
//www.bootply.com/ZHVTKLJNj3

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。