我正在使用MVC ASP.Net应用程序,用户需要填写表单。有一个文本框,用户必须输入他们目前工作的时间。如果用户输入的时间少于三年,那么我需要弹出一段表格用于他们以前的工作。页面加载时,此部分隐藏了jQuery。
用户可以输入0到99之间的数字,否则会触发错误。出于这个原因,我无法真正使用下拉菜单来执行此操作;用户输入值更有意义。
输入文本框的特定值是否会触发jQuery事件?我一直在努力找到解决问题的方法,而我缺乏jQuery的经验确实影响了我的工作能力。我真的可以使用一些指导,因为从逻辑上讲,这段代码在我脑海中是有道理的,我不知道我哪里出错了。
MVC模型
[Required]
[Range(0, 99)]
[Display(Name = "Number of Years at Current Employer")]
public int Buy1YearsAtEmployer { get; set; }
HTML / Razor语法:
<div class="form-group required col-md-4">
@Html.LabelFor(model => model.Buy1YearsAtEmployer, new { @class = "control-label" })
@Html.TextBoxFor(model => model.Buy1YearsAtEmployer, new { id = "applicantYearsAtCurrentEmployer", @Value = "", @class = "form-control" })
@Html.ValidationMessageFor(model => model.Buy1YearsAtEmployer, "Please enter a valid number of years", new { @class = "text-danger" })
</div>
<div class="container" id="applicantPreviousWork">
<h4>Your Previous Employment</h4>
<!--More code--!>
</div>
的jQuery
$('#applicantYearsAtCurrentEmployer').focusout(function () {
if ($(Buy1YearsAtEmployer).val() <= 3) {
$('#applicantPreviousWork').show();
}
else {
$('#applicantPreviousWork').hide();
}
});
答案 0 :(得分:0)
这样可以正常工作。将Buy1YearsAtEmployer
更改为this
。 See my fiddle
<input id="applicantYearsAtCurrentEmployer">
<div id="applicantPreviousWork" style="display:none;">
Years worked...
</div>
和JS:
$('#applicantYearsAtCurrentEmployer').focusout(function () {
if ( $(this).val() <= 3) {
$('#applicantPreviousWork').show();
}
else {
$('#applicantPreviousWork').hide();
}
});
答案 1 :(得分:0)
使用文本框上的jquery更改功能捕获值。然后,根据值打开弹出窗口。对于输入文本字段,当值更改且文本字段失去焦点时会触发change事件。
https://api.jquery.com/change/
$(document).ready(function(){
$('#applicantYearsAtCurrentEmployer').change(function() {
var currVal = $(this).val();
//Now put your logic here.
});});