Member 12224368 Ответов: 2

Как скрыть три выпадающих списка с помощью javascript и MVC

Привет,

У меня есть свойство выпадающего списка, в этом выпадающем списке у меня есть компания, отдел, подразделение, если я выберу компанию из выпадающего списка, поле компании должно отображаться, а отдел и подразделение должны скрываться. Если выбрать отдел из выпадающего списка, то поле отдел должно отображать оставшиеся две компании, а подразделение должно скрываться. если я выберу подразделение из выпадающего списка, поле подразделение должно отображаться, остальные две компании и отдел должны скрываться.
для этого у меня есть обратный java-скрипт. но когда я обновляю страницу, эти 3 поля отображаются в первый раз, после чего она работает нормально.
Итак, теперь, как я могу скрыть эти 3 поля в первый раз, когда страница обновляется.
Пожалуйста, помогите мне. ниже приведен мой код

Заранее спасибо.

Что я уже пробовал:

< script type= "text/javascript">
$('#purpose'). on ('change', function () {
if (this. value = = = " 0") {
$("#CompanyCode"). show();
} еще {
$("#CompanyCode"). скрыть();
}
if (this. value === "1") {
$("#DepartmentCode"). show();
} еще {
$("#DepartmentCode"). скрыть();
}
if (this. value = = = " 2") {
$("#DivisionCode"). show();
} еще {
$("#DivisionCode"). скрыть();
}

});
< / script>

-------
ниже приведен мой взгляд
------


@Html. LabelFor(model = & gt; model.DesignationBase, htmlAttributes: new { @class = " control-label col-md-3" })
< select id= 'purpose' class=" form-group "style=" width:135px; margin-left:6px; " >
&ЛТ;параметр="выбор"и GT;выберите&ЛТ;/вариант&ГТ;
&ЛТ;значение параметра="0">В компании&ЛТ;/вариант&ГТ;
&ЛТ;значение параметра="1"и GT;кафедра&ЛТ;/вариант&ГТ;
&ЛТ;значение параметра="2">В раздел&ЛТ;/вариант&ГТ;
< / select>



< form id= "DesignationBase">

&л;класс Label="контроль-метки коль-МД-2" для="CompanyCode"&ГТ;&ЛТ;/ярлык&ГТ;

@Html. DropDownList ("CompanyCode", null, htmlAttributes: new { @class = " form-control" })
@Html. ValidationMessageFor(model = & gt; model.Обозначение Base,"", new { @class = " text-danger" })



&л;класс Label="контроль-метки коль-МД-2" для="DepartmentCode"&ГТ;&ЛТ;/ярлык&ГТ;

@Html. DropDownList ("DepartmentCode", null, htmlAttributes: new { @class = " form-control" })
@Html. ValidationMessageFor(model = & gt; model.Обозначение Base,"", new { @class = " text-danger" })




&л;класс Label="контроль-метки коль-МД-2" для="DivisionCode"&ГТ;&ЛТ;/ярлык&ГТ;

@Html. DropDownList ("DivisionCode", null, htmlAttributes: new { @class = " form-control" })
@Html. ValidationMessageFor(model = & gt; model.Обозначение Base,"", new { @class = " text-danger" })


< / форма>

2 Ответов

Рейтинг:
20

Karthik_Mahalingam

попробовать это

$(function () {
            // during on load, hide all dll
            $("#CompanyCode, #DepartmentCode, #DivisionCode ").hide();

            $('#purpose').on('change', function () {
                $("#CompanyCode, #DepartmentCode, #DivisionCode ").hide();
                if (this.value === "0")
                    $("#CompanyCode").show();
                else if (this.value === "1")
                    $("#DepartmentCode").show();
                else if (this.value === "2")
                    $("#DivisionCode").show();
            });

        });

Member 12224368

Большое тебе спасибо, Картик.
Это работает :)

Karthik_Mahalingam

добро пожаловать :)

Рейтинг:
0

Praneet Nadkar

Привет,

Пара изменений может сработать:

$(function () {
    $('#purpose').change(function () {
            alert('IN change');
            if (this.value === "0") {
                        $("#ddlCompanyCode").show();
                    } else {
                        $("#ddlCompanyCode").hide();
                    }
                    if (this.value === "1") {
                        $("#ddlDepartmentCode").show();
                    } else {
                        $("#ddlDepartmentCode").hide();
                    }
                    if (this.value === "2") {
                        $("#ddlDivisionCode").show();
                    } else {
                        $("#ddlDivisionCode").hide();
                    }
        });
});




@Html.Label("DesignationBase", new { @class = "control-label col-md-3" })
    <select id="purpose" class="form-group" style="width:135px; margin-left:6px;">
        <option value="select">Select</option>
        <option value="0">Company</option>
        <option value="1">Department</option>
        <option value="2">Division</option>
    </select>

            @Html.DropDownList("CompanyCode", new List<SelectListItem>(), new { @class = "form-control",@id= "ddlCompanyCode" })
            @Html.ValidationMessage("DesignationBase", "", new { @class = "text-danger" })


            <label class="control-label col-md-2" for="DepartmentCode"></label>

            @Html.DropDownList("DepartmentCode", new List<SelectListItem>(), new { @class = "form-control", @id = "ddlDepartmentCode" })
            @Html.ValidationMessage("DesignationBase", "", new { @class = "text-danger" })


            <label class="control-label col-md-2" for="DivisionCode"></label>

            @Html.DropDownList("DivisionCode", new List<SelectListItem>(), new { @class = "form-control", @id = "ddlDivisionCode" })
            @Html.ValidationMessage("DesignationBase", "", new { @class = "text-danger" })