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

Posted 2023-05-09

【中文标题】使用带有最小值和最大值的 jQuery 验证体验下拉列表

【英文标题】：Validate experience dropdown with jQuery with minimum and maximum values

【发布时间】：2013-05-27 23:52:41

【问题描述】：

我正在使用 mvc4

我有 2 个下拉列表，一个是 minimum experience，另一个是 maximum experience，我正在尝试从客户端验证最小值和最大值，反之亦然，但没有以我想要的方式工作。我想要达到的目标......

1。 最小值应始终小于最大值。

2。 如果最小值和最大值都是0，那么它应该继续。

3。 两者都可以允许空白（不想给出最小值或最大值），我的意思是用户也可以选择默认值，就像---minimum---和---maximum---一样。

4。 如果没有选择最小值，只选择了最大值，那么它应该继续。最少也是一样的情况。

到目前为止，我有这个：

创建FIDDLE 来说明想法。

jQuery

_ **_EDITED** _____________

距离如此之近，快到这里，现在只剩下一件事，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>

非常感谢任何帮助。

谢谢大家提前。

【问题讨论】：

我假设您正在寻找客户端验证？这个问题应该让您开始在服务器端：***.com/q/13764684/534109 - 简而言之，目前 MVC 中没有任何内容可以让您进行不显眼的验证。

我编辑了我的问题，非常接近目标。

【参考方案1】：

这更接近你想要的吗？如果没有，我希望从这一点开始编辑至少应该更容易。

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>

---

演示：http://jsfiddle.net/pLkX6/3/

【讨论】：

哇，克里斯……它就像一个魅力。这正是我想要的。 +1

也对我有用.. 非常感谢@Chris Barr Sir

我们可以隐藏用户不需要的值，而不是显示“最小经验应该小于最大值”消息吗？如果是请告诉我

如果用户在最小值中选择 50 lacs，则最大选项值自动隐藏在 50 lacs 值以下，然后用户无法看到低于 50 lacs 的值

【参考方案2】：

编写一个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()
  );