如何使用javascript和MVC隐藏三个下拉列表 [英] How to hide three drop down list using javascript and MVC
问题描述
我有一个下拉列表属性，如果我从下拉列表公司字段中选择公司那么下拉我有公司，部门，部门应该显示，部门和部门应该隐藏。如果从下拉列表中选择部门，则部门字段应显示剩余的两个公司和部门应隐藏。如果我从下拉分区字段中选择分区应该显示，休息两个公司和部门应该隐藏。
我有返回java脚本来执行此操作。但是当我刷新页面时，这些3个字段在第一时间显示，之后它正常工作。
所以现在我可以在页面刷新时第一次隐藏这三个字段。
请帮帮我。以下是我的代码
提前谢谢。
我尝试了什么：
< script type =text / javascript>
$（'＃purpose'）。on（'更改'，function（）{
if（this.value ===0）{
$（＃CompanyCode）。show（）;
} else {
$（＃CompanyCode）。hide（）;
}
if（this。值===1）{
$（＃DepartmentCode）。show（）;
} else {
$（ #DepartmentCode）。hide（）;
}
if（this.value ===2）{
$（ #DivisionCode）。show（）;
} else {
$（＃DivisionCode）。hide（）;
}
}）;
< / script>
- -----
以下是我的观点
------
Hi,
I have a drop down list property, in that drop down I have Company, Department, Division if I select company from drop down list company field should display and department and division should hide. If select Department from drop down list, Department field should display remaining two company and division should hide. if I select division from drop down division field should display, rest two company and department should hide.
i have return java script to do this. but when I refresh the page these 3 fields are showing at first time, after that it is working fine.
So now how I can hide these 3 fields at first time when page get refreshed.
Please help me. below is my code
Thank you in advance.
What I have tried:
<script type="text/javascript">
$('#purpose').on('change', function () {
if (this.value === "0") {
$("#CompanyCode").show();
} else {
$("#CompanyCode").hide();
}
if (this.value === "1") {
$("#DepartmentCode").show();
} else {
$("#DepartmentCode").hide();
}
if (this.value === "2") {
$("#DivisionCode").show();
} else {
$("#DivisionCode").hide();
}
});
</script>
-------
below is my view
------
@ Html.LabelFor（model => model.DesignationBase，htmlAttributes：new {@class =control-label col-md-3}）
< select id ='purpose'class =form-groupstyle =width ：135px; margin-left：6px;>
< option value =select>选择< / option>
< option value =0 >公司< /选项>
<选项值=1>部门< /选项>
< option value =2> Division< ; / option>
< / select>
@Html.LabelFor(model => model.DesignationBase, htmlAttributes: 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>
< form id =DesignationBase>
<form id="DesignationBase">
< label class =control-label col-md-2for =CompanyCode>< / label>
<label class="control-label col-md-2" for="CompanyCode"></label>
@ Html.DropDownList（CompanyCode，null，htmlAttributes ：new {@class =form-control}）
@ Html.ValidationMessageFor（model => model.DesignationBase，，new {@class =text-danger}）
@Html.DropDownList("CompanyCode", null, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.DesignationBase, "", new { @class = "text-danger" })
< ; label class =control-label col-md-2for =DepartmentCode>< / label>
<label class="control-label col-md-2" for="DepartmentCode"></label>
@ Html.DropDownList（DepartmentCode，null，htmlAttributes：new {@class =form-control}）
@ Html.ValidationMessageFor（model => model.DesignationBase，，new {@class =text-danger}）
@Html.DropDownList("DepartmentCode", null, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.DesignationBase, "", new { @class = "text-danger" })
< label class =control-label col-md-2for =DivisionCode>< ; / label>
<label class="control-label col-md-2" for="DivisionCode"></label>
@ Html.DropDownList（DivisionCode，null， htmlAttributes：new {@class =form-control}）
@ Html.ValidationMessageFor（model => model.DesignationBase，，new {@class =text-danger}）
@Html.DropDownList("DivisionCode", null, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.DesignationBase, "", new { @class = "text-danger" })
< / form>
</form>
推荐答案
（'＃purpose'）。on（'change'，function（）{
if（this.value ===0）{
('#purpose').on('change', function () {
if (this.value === "0") {
<无线电通信/>
（＃CompanyCode）。show（）;
} else {
("#CompanyCode").show();
} else {
（＃CompanyCode）。hide （）;
}
if（this.value ===1）{
("#CompanyCode").hide();
}
if (this.value === "1") {
这篇关于如何使用javascript和MVC隐藏三个下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
