如何从Js中的选择框显示警报消息中选择最大日期(How to select maximum date from select box show alert message in Js)

编程入门行业动态更新时间:2024-10-22 18:33:42

在下面的代码段中，最长日期为2017年7月29日。如果我选择最大日期，我们应该显示一个警告框。可以使用Javascript或jQuery吗？

注意：选项以随机顺序显示。

HTML：

In the below snippet, the maximum date is 29-July-2017. If I select the maximum date we should display an alert box. Is it possible using Javascript or jQuery?

Note: Options display in random order.

HTML:

最满意答案

你可以尝试这样的事情：

逻辑：

创建一个变量，该变量将保存最大日期的值或文本（ 在下面的示例中 ）。然后添加一个eventListener来检查更改时的必要属性。如果此属性与步骤1中计算的最大值相同，则提醒用户。

注意：两种方法都假设没有动态元素，因此最大日期的计算是事先在document.ready上完成的。另外，我保持变量value或text 。这将允许我们绕过每个更改创建日期的步骤。

用文本方法

$(function(){
  var maxValue = null;
  function computeMaxValue(arr){
    arr.reduce(function(_max, cur){
      var t = new Date(cur).getTime();
      if(t > _max) {
        _max = t;
        maxValue = cur;
      }
      return _max;
    }, 0)
  }
  
  var dates = $('#period option').map(function(){ return $(this).text() }).get();
  computeMaxValue(dates);

  $('#period').on('change', function(){
    var text = $('option:selected', this).text();
    if(text === maxValue){
      console.log('You have selected Max value');
    }
  })
}) 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select id="period" name="PeriodCollection" style="border-radius: 4px; ">
    <option value="3">10-July-2017</option>
    <option value="12">15-July-2017</option>
    <option value="9">29-July-2017</option>
    <option value="5">23-July-2017</option>
</select> 
  
 
 
 有价值的方法  
 
 
  
  $(function(){
  var maxValue = null;
  function computeMaxValue(selector){
    var temp = 0;
    $(selector).each(function (index, el){
      var time = new Date(el.textContent).getTime();
      if(time >= temp) {
        temp = time;
        maxValue = el.value;
      }
    })
  }
  
  computeMaxValue('#period option');

  $('#period').on('change', function(){
    if(this.value === maxValue){
      console.log('You have selected Max value');
    }
  })
}) 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select id="period" name="PeriodCollection" style="border-radius: 4px; ">
    <option value="3">10-July-2017</option>
    <option value="12">15-July-2017</option>
    <option value="9">29-July-2017</option>
    <option value="5">23-July-2017</option>
</select> 
  
 
 
 样品有1个选项  
 
 
  
  $(function(){
  var maxValue = null;
  function computeMaxValue(selector){
    var temp = 0;
    $(selector).each(function (index, el){
      var time = new Date(el.textContent).getTime();
      if(time >= temp) {
        temp = time;
        maxValue = el.value;
      }
    })
  }
  
  computeMaxValue('#period option');

  $('#period').on('change', function(){
    if(this.value === maxValue){
      console.log('You have selected Max value');
    }
  })
}) 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select id="period" name="PeriodCollection" style="border-radius: 4px; ">
    <option>--Select Period--</option>
    <option value="5">23-July-2017</option>
</select> 
  
 
You can try something like this: 
Logic: 
 
 Create a variable that will either hold value or text(in below sample) of max date. 
 Then add an eventListener to check the necessary attribute on change. 
 If this attribute is same as Max computed in step 1, alert the user. 
 
Note: Both the approaches assumes that there will be no dynamic elements and so the computation of max date is done beforehand on document.ready. Also, I'm keeping value or text in variable. This will allow us to bypass the step to create date on every change. 
Approach with Text 
 
 
  
  $(function(){
  var maxValue = null;
  function computeMaxValue(arr){
    arr.reduce(function(_max, cur){
      var t = new Date(cur).getTime();
      if(t > _max) {
        _max = t;
        maxValue = cur;
      }
      return _max;
    }, 0)
  }
  
  var dates = $('#period option').map(function(){ return $(this).text() }).get();
  computeMaxValue(dates);

  $('#period').on('change', function(){
    var text = $('option:selected', this).text();
    if(text === maxValue){
      console.log('You have selected Max value');
    }
  })
}) 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select id="period" name="PeriodCollection" style="border-radius: 4px; ">
    <option value="3">10-July-2017</option>
    <option value="12">15-July-2017</option>
    <option value="9">29-July-2017</option>
    <option value="5">23-July-2017</option>
</select> 
  
 
 
Approach with Value 
 
 
  
  $(function(){
  var maxValue = null;
  function computeMaxValue(selector){
    var temp = 0;
    $(selector).each(function (index, el){
      var time = new Date(el.textContent).getTime();
      if(time >= temp) {
        temp = time;
        maxValue = el.value;
      }
    })
  }
  
  computeMaxValue('#period option');

  $('#period').on('change', function(){
    if(this.value === maxValue){
      console.log('You have selected Max value');
    }
  })
}) 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select id="period" name="PeriodCollection" style="border-radius: 4px; ">
    <option value="3">10-July-2017</option>
    <option value="12">15-July-2017</option>
    <option value="9">29-July-2017</option>
    <option value="5">23-July-2017</option>
</select> 
  
 
 
Sample with 1 option 
 
 
  
  $(function(){
  var maxValue = null;
  function computeMaxValue(selector){
    var temp = 0;
    $(selector).each(function (index, el){
      var time = new Date(el.textContent).getTime();
      if(time >= temp) {
        temp = time;
        maxValue = el.value;
      }
    })
  }
  
  computeMaxValue('#period option');

  $('#period').on('change', function(){
    if(this.value === maxValue){
      console.log('You have selected Max value');
    }
  })
}) 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select id="period" name="PeriodCollection" style="border-radius: 4px; ">
    <option>--Select Period--</option>
    <option value="5">23-July-2017</option>
</select>