我使用的是mvc4
我有2个下拉列表,其中一个是minimum experience
,而其他是maximum experience
,我正在尝试验证最小值,最大值是从客户端验证最小值,但是没有让它以我想要的方式工作。我希望实现的目标......
1 即可。 最小值应始终小于最大值。
2 即可。 如果最小值和最大值均为0
,那么它应该继续。
第3 即可。 两者都可以允许空白(不想给出最小值或最大值),我的意思是用户也可以选择默认值,就像---minimum---
和---maximum---
一样。
4 即可。 如果未选择最小值,则选择最大值,然后应该继续。同样的情况也是最小的。
到目前为止我有这个:
创建FIDDLE来说明想法。
的jQuery
_ ** _已编辑** _ __ _ __ _ __ _ __ _
达到如此接近,接下来,现在只需要重做一件事,maximum
被检查为值并进行比较,但我想通过条件忽略它。
$("#MinExperienceDropDown").change(function () {
if ((($(this).val()) != "" && ($("#MaxExperienceDropDown").val() != "")) && ($("#MaxExperienceDropDown").val() != "") && ($(this).val() > $("#MaxExperienceDropDown").val())) {
alert('Minimum expreience should be less than maximum');
}
});
$("#MaxExperienceDropDown").change(function () {
if ($(this).val() < $("#MinExperienceDropDown").val()) {
alert('Maximum expreience should be greater than minimum');
}
});
HTML
<div style="text-align: left">
<select name="MinExperience" id="MinExperienceDropDown" style="width: 32%" class="select">
<option value="">--Minimum--</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="MaxExperience" id="MaxExperienceDropDown" style="width: 32%; float: right;margin-right: 82px" class="select">
<option value="">--Maximum--</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
非常感谢任何帮助。
提前全部谢谢。
答案 0 :(得分:3)
这更接近你想要的吗?如果没有,我希望至少从这一点起编辑起来更容易。
<强> JS 强>
//Cache these as variables so we only have to select once
var $min= $("#MinExperienceDropDown");
var $max = $("#MaxExperienceDropDown");
var $msg = $("#message");
//Apply a single change event to fire on either dropdown
$min.add($max).change(function () {
//Have some default text to display, an empty string
var text = "";
//Cache the vales as variables so we don't have to keep getting them
//We will parse the numbers out of the string values
var minVal = parseInt($min.val(),10);
var maxVal = parseInt($max.val(),10)
//Determine if both are numbers, if so then they both have values
var bothHaveValues = !isNaN(minVal) && !isNaN(maxVal);
if(bothHaveValues){
if(minVal > maxVal){
text += 'Minimum expreience should be less than maximum';
}else if(maxVal < minVal){
text += 'Maximum expreience should be greater than minimum';
}
}
//Display the text
$msg.html(text);
});
<强> HTML 强>
<label for="MaxExperienceDropDown">Min Experience</label>
<select name="MinExperience" id="MinExperienceDropDown">
<option value=""></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br>
<br>
<label for="MaxExperienceDropDown">Max Experience</label>
<select name="MaxExperience" id="MaxExperienceDropDown">
<option value=""></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div id="message"></div>
答案 1 :(得分:1)
编写一个javascript方法
function validation(){
if($("#MaxExperienceDropDown").val() != "" && $("#MinExperienceDropDown").val() != "" && (($("#MaxExperienceDropDown").val() != 0 && $("#MinExperienceDropDown").val() != 0) || ($("#MaxExperienceDropDown").val() < $("#MinExperienceDropDown").val()))){
//your alert message here
}
}
从下面给出的下拉列表的onChange事件中调用此方法
$("#MinExperienceDropDown").change(function () {
validation()
});
$("#MaxExperienceDropDown").change(function () {
validation()
});