可输入过滤和直接选择的select控件

代码：

<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%><script language="javascript" type="text/javascript" src="<s:url value='/plugin/artDialog4.1.7/jquery.artDialog.source.js?skin=simple'/>"></script>
<script language="javascript" type="text/javascript" src="<s:url value='/plugin/artDialog4.1.7/plugins/iframeTools.source.js'/>"></script><style type="text/css">
.selectTab{width: 726px;height: 43px;background-image: url("<c:url value='/images/teachManagement/selectBG_studentActivity.png'/>");background-repeat: no-repeat;display: block;
}.font-12{font-family: '微软雅黑';font-size: 12px;font-weight: normal;font-style: normal;text-decoration: none;color: #333333;
}table.selectTable tr td{padding: 4px 10px 4px 0px;
}.classSelect{width: 120px;height: 22px;font-family: '微软雅黑';font-size: 13px;color: #000000;font-style: normal;font-weight: normal;text-decoration: none;
}.errorPoint{width: 121px;height: 27px;cursor:pointer;
}.rank{margin: 0px;padding: 0px;width: 240px;height: 500px;position: absolute;top: 40px;left: 745px;
}.font-18{text-align: left;font-family: '微软雅黑';font-size: 18px;font-weight: normal;font-style: normal;text-decoration: none;color: #333333;
}/**-----输入搜索下拉框-----**/
.selectStyle{width: 188px;height: 22px;font-family: '微软雅黑';font-size: 12px;color: #000000;font-style: normal;font-weight: normal;text-decoration: none;
}
.selectContainer{position:absolute;border:1pt solid #c1c1c1;overflow:hidden;width:188px;height:19px;clip:rect(-1px 190px 190px 170px);
}.inputContainer{position:absolute;border-top:1pt solid #c1c1c1;border-left:1pt solid #c1c1c1;border-bottom:1pt solid #c1c1c1;width:170px;height:19px;
}.filterOption{position:absolute;width:100%;min-height:150px;background-color: white;top: 22px;display:none;z-index: 3;
}.line_option{background-color: white;
}.line_option_select{background-color: grey;cursor:pointer;
}
/**-----输入搜索下拉框-----**/</style><script type="text/javascript" charset="UTF-8">function initFilterOption(){$("#filterOption>table").empty();var curName = $("#studentName").val();if( $.trim(curName) == "" ){$("#filterOption>table").empty();return;}$("#studentUserId_2>option").each(function(){var key = $(this).val();var value = $.trim($(this).text());if( value.indexOf(curName) ==0 ){$("#filterOption>table").append("<tr class='line_option'><td><span key='"+key+"'>" + value + "</span></td></tr>");}});}//通过键盘的up/down移动function moveOption( moveDown ){var selOption = $("#filterOption>table").find("tr.line_option_select");if( moveDown ){//没有选中的if( selOption.length ==0 ){$("#filterOption>table").find("tr").first().addClass("line_option_select");}//有选中的，且不是最后一个else if(selOption.next("tr").length != 0 ){selOption.removeClass("line_option_select");selOption.next("tr").addClass("line_option_select");}else{selOption.removeClass("line_option_select");$("#filterOption>table").find("tr").first().addClass("line_option_select");}}else{//没有选中的if( selOption.length ==0 ){$("#filterOption>table").find("tr").last().addClass("line_option_select");}//有选中的，且不是第一个else if(selOption.prev("tr").length != 0 ){selOption.removeClass("line_option_select");selOption.prev("tr").addClass("line_option_select");}else{selOption.removeClass("line_option_select");$("#filterOption>table").find("tr").last().addClass("line_option_select");}}}function selectOption(){var selOption = $("#filterOption>table").find("tr.line_option_select");if( selOption.length != 0 ){var key = selOption.find("span").attr("key");var value = $.trim(selOption.find("span").html());$("#studentName").val( value );$("#studentUserId_2 option[value='"+ key +"']").attr("selected", true);$("#filterOption").hide();var userId = $("#studentUserId_2").val();var dateTime = new Date().getTime();$("#activity_notification").load("<s:url value='/schoolclass/getClassMateActivityList.action?pageIndex='/>"+ "1&pageSize=5&isFirstQuery=true&queryTime="+ dateTime +"&id=" + userId );}}window.document.onkeydown = function keydownHandler(evt){evt = (evt) ? evt : window.event;if (evt.keyCode) {if(evt.keyCode == 38){moveOption(false);return false;}else if(evt.keyCode == 40){moveOption(true);return false;}else if(evt.keyCode == 13 ){selectOption();}}};$().ready(function(){//学生下拉框改变$("#studentUserId_2").change(function(){var userId = $("#studentUserId_2").val();var userName = $.trim($("#studentUserId_2").find("option:selected").text());var dateTime = new Date().getTime();$("#activity_notification").load("<s:url value='/schoolclass/getClassMateActivityList.action?pageIndex='/>"+ "1&pageSize=5&isFirstQuery=true&queryTime="+ dateTime +"&id=" + userId );$("#studentName").val( userName );});$("#studentName").focus(function(){initFilterOption();$("#filterOption").show();});$(document).bind("mouseup",function(evt){var targetObj = $(evt.target);if( targetObj.is("input") && targetObj.attr("id") == "studentName" ) {//是学生输入框不做操作}else{$("#filterOption").hide();}});$("#studentName").bind("input propertychange",function(){initFilterOption();if( $("#filterOption").is(":hidden") ){$("#filterOption").show();}});//过滤后的学生姓名hover事件$("#filterOption").find("tr").die().live({mouseenter:function(){$(this).addClass("line_option_select");},mouseleave:function(){$(this).removeClass("line_option_select");},//过滤后的学生姓名选中事件click:function(){var key = $(this).find("span").attr("key");var value = $.trim($(this).find("span").html());$("#studentName").val( value );$("#studentUserId_2 option[value='"+ key +"']").attr("selected", true);$("#filterOption").hide();var userId = $("#studentUserId_2").val();var dateTime = new Date().getTime();$("#activity_notification").load("<s:url value='/schoolclass/getClassMateActivityList.action?pageIndex='/>"+ "1&pageSize=5&isFirstQuery=true&queryTime="+ dateTime +"&id=" + userId );}});//学习时长排行榜刷新Button$(".ranking_refresh_btn").click(function(){var schoolClassId = '${schoolClassId}';$.ajax({url: "<c:url value='/base/getStudyTimeList.action'/>",type: "post",async:true,data:{schoolClassId:schoolClassId},success: function( response ){$(".studyTimeRank").empty();$(".studyTimeRank").append(response);},error: function(reqObj, strError, strObj){alert("加载排行榜失败：" + strError);}});});$("#studentUserId_2").trigger("change");$(".ranking_refresh_btn").trigger("click");});
</script><div id="main"><div id="left" style="width: 726px;"><div class="selectTab"><table class="selectTable" style="width: 300px;"><tr><td style="width: 1px;"></td><td style="width:60px;"><div style="position:relative;margin-top: 5px;"><span class="font-12">学生姓名：</span></div></td><td style="width:180px;"><div style="position:relative;height: 22px;margin-top: 5px;"><span class="selectContainer">    <select id="studentUserId_2" name="studentUserId_2" class="selectStyle" style="margin-top: -1px;"><s:iterator value="studentList" var="optionPair" status="status"><s:if test="#optionPair.extend == 'selected'"><option selected="selected" value="<s:property value='#optionPair.key'/>"><s:property value='#optionPair.value'/></option></s:if><s:else><option value="<s:property value='#optionPair.key'/>"><s:property value='#optionPair.value'/></option></s:else></s:iterator></select></span><span class="inputContainer"><input type="text" name="studentName" id="studentName" value="" style="width:170px;height:15px;border:0pt;margin: 0px;"></span><div id="filterOption" class="filterOption"><table style="margin-bottom:0px;"></table></div></div></td></tr></table></div><div id="activity_notification"></div></div><div id="right" class="rank"><div style="margin-top: 5px;margin-bottom: 10px;"><span class="font-18" style="font-weight: bold;">本月班级学习时长排行榜</span><span class="ranking_refresh_btn" style="margin-left:10px;" title="点击，刷新排行榜"><img src="/images/new_exercise_refresh.png" style="width:22px;height:22px;"></span></div><div class="studyTimeRank"></div></div>
</div>

可输入过滤和直接选择的select控件相关推荐

前端学习之select控件的使用2，省市县三级联动选择，select控件属性、方法、事件的综合应用...
总结select控件的属性.方法.事件的使用.数据源使用json数据,包括json数据的遍历. <label for="sheng">省</label> & ...
JavaScript操作select控件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
elemtnui select控件结合树形控件实现自定义搜索方法
业务需求: 可以从下拉框中选择数据,也可以自定义搜索. 前端效果: 1:从下拉框中选择 2:自定义搜索 3:单选并赋值:也就是选中那个就回显那个代码实现: 1.首先需要用到select控件和tree ...
html下拉列表插件,js+CSS实现模拟华丽的select控件下拉菜单效果
本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个JS+CSS技术实现的Select控件效果,模拟出来的,比默认的Select更漂亮,有了这个 ...
HTML select控件
select控件 select控件用于创建下拉列表框(下拉菜单),并通过 option 元素创建列表中的选项,供用户从中选择. 定义 select控件时,在 select元素中设置 name 属性,并 ...
菜单向上拉html,模拟select控件，CSS上拉菜单
模拟select控件,CSS下拉菜单模拟select控件 html,body{height:100%;overflow:hidden;} body,div,form,h2,ul,li{margin: ...
以编程方式在ASP.NET MVC中使用多个HTML Select控件
目录介绍使用代码使用JQuery 使用Razor和C# 兴趣点介绍很多时候,我们使用JavaScript或JQuery代码来操纵HTML控件,却不知道ASP.NET MVC与Razor和C# ...
Selenium处理Select控件
Selenium处理Select控件 1.介绍: 在进行Web应用自动化测试的过程中,Select下拉框是我们经常会操作的控件,Selenium针对这种控件封装了Select类供我们测试使用.当然,也 ...
Select控件实现联动下拉列表框效果
Select控件实现联动下拉列表框效果(无需数据库) Select控件属性介绍: ID属性:获取或设置分配给Select控件的编程标识符. Name属性:获取或设置与Select控件关联的唯一标识符. ...

可输入过滤和直接选择的select控件

可输入过滤和直接选择的select控件相关推荐

最新文章

热门文章