在以下代码段中，最长日期为2017年7月29日。如果我选择最大日期，我们应该显示一个警告框。可以使用Javascript或jQuery吗？
注意：选项以随机顺序显示。
HTML：
<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>
答案 0 :(得分：2)
您可以尝试这样的事情：
注意：这两种方法都假定没有动态元素，因此最大日期的计算是事先在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>
答案 1 :(得分：1)
将选项转换为ms并获取最大值，然后检查所选日期是否与最大值相同。（使用纯js）
var periodSelector = document.getElementById('period');
var options = periodSelector.options;
periodSelector.onchange = function(e) {
// get the selected date and convert it to ms
var selectedIndex = this.selectedIndex;
var selectedDate = new Date(options[selectedIndex].text).valueOf();
// convert all date to ms and get the max date
var maxDate = Array.prototype.reduce.call(options, function(maxValue, curValue) {
return Math.max(new Date(curValue.text), maxValue);
}, 0);
// check if selected date is same as max date
if (selectedDate === maxDate) {
alert('Max Date is selected');
}
};<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>
答案 2 :(得分：1)
希望以下代码有帮助
<!DOCTYPE html>
<html>
<head>
<title> Stack Overflow Question </title>
<style>
</style>
</head>
<body>
<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$('#period').on('change',function(){
//Array to Store the dates from the options
var datesArr = [];
//Get the date from the Selected option
var d = new Date($('#period option:selected').text()).getDate();
//Pushing the dates to the Array
$('#period option').each(function(){
var d = new Date($(this).text());
datesArr.push(d.getDate());
});
//Getting the Max value from the Array
var max = Math.max(...datesArr);
//Converting to integers
d = parseInt(d);
max = parseInt(max);
//Comparing
if(d == max){
alert("Selected the Maximum Date");
}
});
</script>
</body>
</html>
答案 3 :(得分：1)
尝试以下代码：
$("#period").change(function(){
var selectedValue = $(this).find("option:selected").text();
var data = selectedValue.split("-");
var month = new Date(Date.parse(data['1']+data['0'], data['2'])).getMonth();
var selectedDate = new Date(data['2'],month,data['0']);
var dates = [];
$("#period").find("option").each(function(e){
var currentText = $(this).text();
var currenData = currentText.split("-");
var currentMonth = new Date(Date.parse(data['1']+data['0'], data['2'])).getMonth();
dates.push(new Date(currenData['2'],currentMonth,currenData['0']));
});
var maxDate=new Date(Math.max.apply(null,dates));
if(selectedDate.getTime() === maxDate.getTime()){
alert(maxDate);
}
});<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>