Скрыть форму при выборе значения из выпадающего списка

Question

У меня есть эти формы.

<div class="form-group"> 
    @Html.LabelFor(model => model.RoomsNumber, htmlAttributes: new { @class = "control-label col-md-2" }) 
    <div class="col-md-10"> 
    @Html.EditorFor(model => model.RoomsNumber, new { htmlAttributes = new { @class = "form-control" } }) 
    @Html.ValidationMessageFor(model => model.RoomsNumber, "", new { @class = "text-danger" }) 
    </div> 
</div> 

<div class="form-group"> 
    @Html.LabelFor(model => model.ProductCategoryId, "Type of home", htmlAttributes: new { @class = "control-label col-md-2"}) 
    <div class="col-md-10"> 
    @Html.DropDownList("ProductCategoryId", null, htmlAttributes: new { @class = "form-control" }) 
    @Html.ValidationMessageFor(model => model.ProductCategoryId, "", new { @class = "text-danger" }) 
    </div> 
</div> 

Я хочу, когда я выберу определенное значение из раскрывающегося списка, чтобы скрыть форму с помощью Номера номеров. Я не знаю, как это сделать.

Answer 1

Вы можете сделать это easyly с помощью JavaScript, вам нужно ID для ваших номера образуют и другой ID для категории продукта выпадающего списка, то вам нужно добавить прослушиватель событие услышать событие изменения ваших ниспадающий:

JS

var ddl = document.getElementById('ddlProductCategory'), 
    form = document.getElementById('roomsForm'); 

ddl.addEventListener('change', function(){ 
if (this.value === '5'){ 
    form.style.display = 'none'; 
} 
else { 
    form.style.display = 'block'; 
} 
}); 

HTML

<div class="form-group" id="roomsForm"> 
    @Html.LabelFor(model => model.RoomsNumber, htmlAttributes: new { @class = "control-label col-md-2" }) 
    <div class="col-md-10"> 
    @Html.EditorFor(model => model.RoomsNumber, new { htmlAttributes = new { @class = "form-control" } }) 
    @Html.ValidationMessageFor(model => model.RoomsNumber, "", new { @class = "text-danger" }) 
    </div> 
</div> 

<div class="form-group"> 
    @Html.LabelFor(model => model.ProductCategoryId, "Type of home", htmlAttributes: new { @class = "control-label col-md-2"}) 
    <div class="col-md-10"> 
    @Html.DropDownList("ProductCategoryId", null, htmlAttributes: new { @class = "form-control", id = 'ddlProductCategory" }) 
    @Html.ValidationMessageFor(model => model.ProductCategoryId, "", new { @class = "text-danger" }) 
    </div> 
</div>