代碼：

<%@ 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控件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。