MVC为不同的下拉列表选择执行不同的方法
MVC Perform different methods for different dropdownlist selections
控制器
[Authorize]
public ActionResult Create()
{
var LeaveType = new SelectList(new[]
{
new { ID = "0", Name = "" },
new { ID = "1", Name = "Full day leave" },
new { ID = "2", Name = "Half day AM leave" },
new { ID = "3", Name = "Half day PM leave" },
new { ID = "4", Name = "Time off" },
},
"ID", "Name", 0);
ViewData["LeaveType"] = LeaveType;
return View();
}
查看
<div class="form-group">
<div class="col-md-4 col-md-offset-4">
<label class="text-center">Leave Type</label>
@Html.DropDownList("LeaveType", null, htmlAttributes: new { @class = "form-control" })
</div>
</div>
脚本
$('#LeaveType').change(function () {
var value = $(this).val();
if (value == "0") {
$('#EndDate').closest('.form-group').hide();
$('#StartDate').closest('.form-group').hide();
$('#datetimepicker6').closest('.form-group').hide();
$('#datetimepicker7').closest('.form-group').hide();
$('#leaveReason').closest('.form-group').hide();
$('#createBtn').closest('.form-group').hide();
$('#cancelBtn').closest('.form-group').hide();
}
else if (value == "1") {
$('#EndDate').closest('.form-group').show();
$('#StartDate').closest('.form-group').show();
$('#datetimepicker6').closest('.form-group').hide();
$('#datetimepicker7').closest('.form-group').hide();
$('#leaveReason').closest('.form-group').show();
$('#createBtn').closest('.form-group').show();
$('#cancelBtn').closest('.form-group').show();
@*@Html.ValueFor(CurrentApplication.)*@
}
else if (value == "2") {
$('#EndDate').closest('.form-group').hide();
$('#StartDate').closest('.form-group').show();
$('#datetimepicker6').closest('.form-group').hide();
$('#datetimepicker7').closest('.form-group').hide();
$('#leaveReason').closest('.form-group').show();
$('#createBtn').closest('.form-group').show();
$('#cancelBtn').closest('.form-group').show();
}
else if (value == "3") {
$('#EndDate').closest('.form-group').hide();
$('#startDate').closest('.form-group').show();
$('#datetimepicker6').closest('.form-group').hide();
$('#datetimepicker7').closest('.form-group').hide();
$('#leaveReason').closest('.form-group').show();
$('#createBtn').closest('.form-group').show();
$('#cancelBtn').closest('.form-group').show();
}
else {
$('#EndDate').closest('.form-group').hide();
$('#StartDate').closest('.form-group').hide();
$('#datetimepicker6').closest('.form-group').show();
$('#datetimepicker7').closest('.form-group').show();
$('#leaveReason').closest('.form-group').show();
$('#createBtn').closest('.form-group').show();
$('#cancelBtn').closest('.form-group').show();
}
});
我的LeaveType
是一个下拉列表,用户可以在其中选择他们想要申请的假期类型(例如全天/半天/休息时间)。当他们在下拉列表中选择值时,我想隐藏或显示某些元素,因为根据休假类型,可能不需要某些元素。
我有一个startDate和endDate文本框,对于半天,我不会显示endDate文本盒,但如果用户从下拉列表中选择了半天选项,我想将endDate设置为与startDate相同。我猜我应该有一个if-else循环,我知道如何写代码,但我不知道该把它放在哪里。
此外,当我在表中显示数据时,我的下拉列表值将显示为ID。如何显示LeaveType的名称?感谢所有的帮助^^谢谢!
您可以使用#StartDate
的change
事件,如下所示。希望这对你有帮助。
$('#StartDate').change(function() {
var endDate = $('#EndDate');
if ($('#LeaveType').val()==2) {
endDate.val($(this).val());
}
});
相关文章:
- 在使用Polymer'加载所有json文件后执行方法;s的核心ajax
- 通过ajax从客户端调用C#方法来执行C#方法
- Javascript:对回调创建的对象执行方法
- ng-if 连续执行方法
- 将外部Javascript文件注入html页面并在其上执行方法WP8 Webbrowser
- 在 JavaScript 中只执行方法的一部分
- AngularJS - 当使用指令生成标记时,无法使用ng-click执行方法
- 在 Ace 编辑器中的多个光标上执行方法
- 如何在列表框项上执行方法选择 asp.net
- 如何在自动可执行方法中获取垃圾对象中属性的值
- 如何在通过对象传递的指令中执行方法
- Cordova插件的执行方法内部的AsyncTask工作不正常
- 在自执行方法中访问Javascript作用域
- 有人知道JS链库允许延迟执行方法吗?
- angularJS$立即执行方法超时
- google-chrome(浏览器)执行方法调用,其结果从未使用(对于RuntimeTest)
- 承诺:如何并行执行异步方法,然后执行方法
- js:在列表被填充后执行方法
- javaScript如何根据条件执行方法
- 守夜人的执行方法