html
<input type="text" class="layui-input blockInput" id="taskExpression" name="taskExpression" value="${timeTask.taskExpression }" lay-verify="required" οnclick="openSelect(this)" οnkeyup="ulHtml()"/>
<div id="expressionDiv" class="expression" style="width: 535px;height:200px;display:none;border: 1px rgb(210, 210, 210) solid;">
<ul id="expression" >
</ul>
</div>
css
<style type="text/css">
#expressionDiv ul li{
cursor:pointer;
line-height:23px;
background:#fff;
margin: 10px;
}
.expression {
position: absolute;
top: 44px;
z-index: 999;
overflow-y: auto;
overflow-x: hidden;
background:#fff
}
#expressionDiv ul li:hover{
background-color:#f5f5f5;
}
</style>
js
$(function(){
ulHtml();
$(document).click(function(e) { // 在页面任意位置点击而触发此事件
var v_id = $(e.target).attr('id');
var id = $(e.target).parent().parent().attr('id');
if("expressionDiv" != v_id && "expressionDiv" != id ){
$("#expressionDiv").css("display","none");
}
if(v_id == "taskExpression"){
$("#expressionDiv").css("display","block");
}
})
});
function ulHtml(stata){
$("#expression").empty();
var expression=['*/3 * * * * ?(每3秒钟执行一次)',
'*/5 * * * * ?(每5秒钟执行一次)',
'*/10 * * * * ?(每10秒钟执行一次)',
'*/15 * * * * ?(每15秒钟执行一次)',
'*/20 * * * * ?(每20秒钟执行一次)',
'*/30 * * * * ?(每30秒钟执行一次)',
'*/40 * * * * ?(每40秒钟执行一次)',
'*/50 * * * * ?(每50秒钟执行一次)',
'0 */1 * * * ?(每1分钟执行一次)',
'0 */5 * * * ?(每5分钟执行一次)',
'0 */10 * * * ?(每10分钟执行一次)',
'0 */15 * * * ?(每15分钟执行一次)',
'0 */30 * * * ?(每30分钟执行一次)',
'0 */40 * * * ?(每40分钟执行一次)',
'0 */50 * * * ?(每50分钟执行一次)',
'0 0 */1 * * ?(每1小时执行一次)',
'0 0 */2 * * ?(每2小时执行一次)',
'0 0 */5 * * ?(每5小时执行一次)',
'0 0 */10 * * ?(每10小时执行一次)',
'0 0 */12 * * ?(每12小时执行一次)',
'0 0 1 * * ?(每天凌晨1点执行)',
'0 0 2 * * ?(每天凌晨2点执行)',
'0 0 3 * * ?(每天凌晨3点执行)',
'0 0 4 * * ?(每天凌晨4点执行)',
'0 0 5 * * ?(每天早上5点执行)',
'0 0 6 * * ?(每天早上6点执行)',
'0 0 12 * * ?(每天中午12点执行)',
'10 */1 * * * ?(任务启动后,10秒开始执行任务)',
'20 */1 * * * ?(任务启动后,20秒开始执行任务)',
'30 */1 * * * ?(任务启动后,30秒开始执行任务)'
];
var taskExpression = $("#taskExpression").val();
html=""
for ( var i = 0; i < expression.length; i++) {
if(taskExpression == "" || stata == '0'){
html += '<li οnclick="selectValue(this)">'+expression[i]+'</li>';
}
if(taskExpression != ""&&expression[i].indexOf(taskExpression)!=-1){
html += '<li οnclick="selectValue(this)">'+expression[i]+'</li>';
}
}
$("#expression").html(html);
}
function hideExpressionDiv(){
if('block' == $("#expressionDiv").css("display")){
$("#expressionDiv").css("display","none");
}else{
$("#expressionDiv").css("display","block");
}
}
function openSelect(_this){
ulHtml('0');
hideExpressionDiv();
}
function selectValue(_this){
$("#taskExpression").val($(_this).text().split("(")[0]);
$(_this).parent().parent().slideToggle(300);
}