ASP.NET MVC 5:根据另一个选择的选定选项进行所需选择

时间:2017-06-02 15:36:51

标签: javascript jquery asp.net-mvc razor

我有2个选择生成(TipoVinculo和CboId),如果TipoVinculo的选定选项不是“Estagiario”,我需要选择CboId。

加: 如果在TipoVinculo中选择的选项是“Estagiario”,则选择CboId应该消失

以下代码:

查看

        <div class="form-group">
            @Html.LabelFor(model => model.TipoVinculo, htmlAttributes: new { @class = "required control-label col-md-2" })
            <div class="col-md-10">
                @Html.EnumDropDownListFor(model => model.TipoVinculo, "-- Selecione --", new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.TipoVinculo, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.CboId, htmlAttributes: new { @class = "required control-label col-md-2" })
            <div class="col-md-10">
                <select id="CboId" name="CboId" class="form-control"></select>
                @Html.ValidationMessageFor(model => model.CboId, "", new { @class = "text-danger" })
            </div>
        </div>

视图模型

    [Display(Name = "Tipo de Vínculo")]
    [Required(ErrorMessage = "O {0} é obrigatório")]
    public TipoVinculo? TipoVinculo { get; set; }
    [Display(Name = "Classificação Brasileira de Ocupação")]
    public string CboId { get; set; }

生成的HTML

<div class="form-group">
    <label class="required control-label col-md-2" for="TipoVinculo">Tipo de Vínculo</label>
    <div class="col-md-10">
        <select class="form-control" data-val="true" data-val-required="O Tipo de Vínculo é obrigatório" id="TipoVinculo" name="TipoVinculo">
            <option selected="selected" value="">-- Selecione --</option>
            <option value="1">Contratado</option>
            <option value="2">Estatutario</option>
            <option value="3">Comissionado</option>
            <option value="4">Estagiario</option>
        </select>
        <span class="field-validation-valid text-danger" data-valmsg-for="TipoVinculo" data-valmsg-replace="true"></span>
    </div>
</div>


<div class="form-group">
    <label class="required control-label col-md-2" for="CboId">Classificação Brasileira de Ocupação</label>
    <div class="col-md-10">
        <select id="CboId" name="CboId" class="form-control">
            <option value="">-- Selecione --</option>
            <option value="1">...</option>
            <option value="2">...</option>
            ...
        </select>
        <span class="field-validation-valid text-danger" data-valmsg-for="CboId" data-valmsg-replace="true"></span>
    </div>
</div>

我尝试使用jQuery验证,但我没有成功

$('#frm-add-sol').validate({
    rules: {
        CboId: {
            depends: function (element) {
                return $("#TipoVinculo").val() != "4";
            }
        }
    },
    messages: {
        CboId: "Classificação Brasileira de Ocupação é obrigatorio"
    }
});

1 个答案:

答案 0 :(得分:0)

您可以尝试这种方式:

"TipoVinculo"

您需要在更改事件的下拉列表$(function () { var $textareas = $('textarea'); $textareas.on('input', autosize); function autosize() { var $this = $(this); $this .css({height: 'auto'}) .css({height: $this.prop('scrollHeight')}); } });中编写上述代码。