使用具有最小值和最大值的jQuery验证体验下拉列表

时间:2013-06-01 05:38:36

标签: jquery html validation asp.net-mvc-4 drop-down-menu

我使用的是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>

非常感谢任何帮助。

提前全部谢谢

2 个答案:

答案 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>

DEMO:http://jsfiddle.net/pLkX6/3/

答案 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()
  });