html
<input type="text" class="layui-input blockInput" id="taskExpression" name="taskExpression" value="${timeTask.taskExpression }" lay-verify="required" onclick="openSelect(this)" onkeyup="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 onclick="selectValue(this)">'+expression[i]+'</li>'; } if(taskExpression != ""&&expression[i].indexOf(taskExpression)!=-1){ html += '<li onclick="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); }