<html>
<head>
<title> 动态下拉框 </title>
<head>
<style>
body,div {
font-family:verdana;
line-height:100%;
font-size:9pt;
}
input {
width:300px;
}
h1 {
text-align:center;
font-size:2.2em;
}
#divf {
margin:10px;
font-size:0.8em;
text-align:center;
}
#divc {
border:1px solid #333333;
}
.des {
width:500px;
background-color:lightyellow;
border:1px solid #333;
padding:20px;
margin-top:20px;
}
.mouseover {
color:#ffffff;
background-color:highlight;
width:100%;
cursor:default;
}
.mouseout {
color:#000000;
width:100%;
background-color:#ffffff;
cursor:default;
}
</style>
<script language="JavaScript">
<!--
function jsAuto(instanceName,objID){
this._msg = [];
this._x = null;
this._o = document.getElementById( objID );
if (!this._o) return;
this._f = null;
this._i = instanceName;
this._r = null;
this._c = 0;
this._s = false;
this._v = null;
this._o.style.visibility = "hidden";
this._o.style.position = "absolute";
this._o.style.zIndex = "9999";
return this;
};
jsAuto.prototype.directionKey=function(){
with (this){
var e = _e.keyCode ? _e.keyCode : _e.which;
var l = _o.childNodes.length;
(_c>l-1 || _c<0) ? _s=false : "";
if(e==40 && _s){
_o.childNodes[_c].className="mouseout";
(_c >= l-1) ? _c=0 : _c ++;
_o.childNodes[_c].className="mouseover";
}
if(e==38 && _s){
_o.childNodes[_c].className="mouseout";
_c--<=0 ? _c = _o.childNodes.length-1 : "";
_o.childNodes[_c].className="mouseover";
}
if(e==13){
if(_o.childNodes[_c] && _o.style.visibility=="visible"){
_r.value = _x[_c];
_o.style.visibility = "hidden";
}
}
if(!_s){
_c = 0;
_o.childNodes[_c].className="mouseover";
_s = true;
}
}
};
// mouseEvent.
jsAuto.prototype.domouseover=function(obj){
with (this){
_o.childNodes[_c].className = "mouseout";
_c = 0;
obj.tagName=="DIV" ? obj.className="mouseover" : obj.parentElement.className="mouseover";
}
};
jsAuto.prototype.domouseout=function(obj){
obj.tagName=="DIV" ? obj.className="mouseout" : obj.parentElement.className="mouseout";
};
jsAuto.prototype.doclick=function(msg){
with (this){
if(_r){
_r.value = msg;
_o.style.visibility = "hidden";
}else{
alert("javascript autocomplete ERROR :\n\n can not get return object.");
return;
}
}
};
// object method;
jsAuto.prototype.item=function(msg){
if( msg.indexOf(",")>0 ){
var arrMsg=msg.split(",");
for(var i=0; i<arrMsg.length; i++){
arrMsg[i] ? this._msg.push(arrMsg[i]) : "";
}
}else{
this._msg.push(msg);
}
this._msg.sort();
};
jsAuto.prototype.append=function(msg){
with (this){
_i ? "" : _i = eval(_i);
_x.push(msg);
var div = document.createElement("DIV");
div.onmouseover = function(){_i.domouseover(this)};
div.onmouseout = function(){_i.domouseout(this)};
div.onclick = function(){_i.doclick(msg)};
var re = new RegExp("(" + _v + ")","i");
div.style.lineHeight="140%";
div.className = "mouseout";
if (_v) div.innerHTML = msg.replace(re , "<strong>$1</strong>");
div.style.fontFamily = "verdana";
_o.appendChild(div);
}
};
jsAuto.prototype.display=function(){
with(this){
if(_f&&_v!=""){
_o.style.left = _r.offsetLeft;
_o.style.width = _r.offsetWidth;
_o.style.top = _r.offsetTop + _r.offsetHeight;
_o.style.visibility = "visible";
}else{
_o.style.visibility="hidden";
}
}
};
jsAuto.prototype.handleEvent=function(fValue,fID,event){
with (this){
var re;
_e = event;
var e = _e.keyCode ? _e.keyCode : _e.which;
_x = [];
_f = false;
_r = document.getElementById(fID);
_v = fValue;
_i = eval(_i);
re = new RegExp("^" + fValue + "", "i");
_o.innerHTML="";
for(var i=0; i<_msg.length; i++){
if(re.test(_msg[i])){
_i.append(_msg[i]);
_f = true;
}
}
_i ? _i.display() : alert("can not get instance");
if(_f){
if((e==38 || e==40 || e==13)){
_i.directionKey();
}else{
_c=0;
_o.childNodes[_c].className = "mouseover";
_s=true;
}
}
}
};
window.onerror=new Function("return true;");
//-->
</script>
<body>
<div align="center">
<table border="1" width="300" height="100">
<tr>
<td>
<div id="divc"><!--this is the autocomplete container.--></div>
<h1>动态下拉框</h1>
<div align="center"><input onkeyup="jsAutoInstance.handleEvent(this.value,'auto',event)" id="auto"></div>
<div id="divf">Power By wiiln</div>
</td>
</tr>
</table>
</div>
</body>
</html>
<script language="JavaScript">
<!--
var jsAutoInstance = new jsAuto("jsAutoInstance","divc");
jsAutoInstance.item("a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start");
jsAutoInstance.item("blueDestiny");
jsAutoInstance.item("BlueMiracle,Blue");
jsAutoInstance.item("angela,geniuslau");
jsAutoInstance.item("never-online");
//-->
</script>
Java软件工程师推荐书籍：
开发者突击：Struts 2核心技术与Java EE框架整合开发实战
轻量级Java EE企业应用实战——Struts 2＋Spring＋Hibernate
JAVA核心技术卷II：高级特性
全新正版《Java程序设计应用基础教程》石号仓
Java编程思想（第4版）
网购通
分享到：
相关推荐
### 如何设置动态下拉框 在Web应用开发过程中，动态下拉框是一种常见的交互方式，它可以提升用户体验并简化表单填写过程。本文将通过一个具体的示例来讲解如何实现动态下拉框。 #### 示例代码解析 首先，我们来看...
《学生管理系统中的动态下拉框实现》 在信息化管理的时代，学生管理系统已经成为教育机构不可或缺的一部分。这个系统旨在高效地管理学生的各类信息，如个人信息、成绩、出勤等。在这个系统中，动态下拉框是一种常见...
标题“select2 动态下拉框插件以及开发心得”指出，我们将探讨一个名为“select2”的JavaScript插件，它主要用于创建动态下拉选择框，并且将分享在开发过程中的一些经验和体会。这暗示了我们将深入讨论select2的功能...
动态下拉框配置档4gl逻辑代码动态下拉框配置档4gl逻辑代码动态下拉框配置档4gl逻辑代码动态下拉框配置档4gl逻辑代码
在ASP中，我们可以通过编程实现动态下拉框，这在创建交互式网站时非常有用，尤其是当需要创建多级选择菜单时。4级动态下拉框意味着用户可以逐级选择，每级选项可能是前一级选择的结果。 在描述中提到的"用sql中同一...
动态下拉框（Dropdown Menu）是网页设计中常见的导航元素，它允许用户在有限的空间内展示多个选择项。在HTML中，我们可以使用`<select>`元素来创建一个基本的下拉框，但要实现动态效果，通常需要借助CSS和JavaScript...
动态下拉框配置档4fd画面代码动态下拉框配置档4fd画面代码动态下拉框配置档4fd画面代码动态下拉框配置档4fd画面代码
综上所述，实现"ssh2+extCombobox联动动态下拉框"涉及了Web应用开发的多个环节，包括前后端通信、数据处理和用户界面交互。理解并熟练掌握这些知识点对于构建动态、交互性强的Web应用至关重要。通过合理设计和实现，...
在Web开发中，AJAX广泛用于实现动态交互效果，比如本文提到的“AJAX动态下拉框”。这个功能通常应用于表单输入，尤其是当用户在输入框中选择或输入时，后台会实时地根据用户的选择或输入内容返回相关的建议数据，...
在IT行业中，动态下拉框（通常与Ajax技术结合）是一种常见的交互元素，它能提供用户友好的体验，使得用户可以在输入框中选择或搜索数据，而无需刷新整个页面。以下将详细介绍动态下拉框与Ajax相关的知识点： 1. **...
动态下拉框数据表建立sch，用于导入p_zta中，产生zta数据并可生成数据表，动态下拉框数据表建立sch，用于导入p_zta中，产生zta数据并可生成数据表
本主题将深入探讨如何使用jQuery动态创建联动下拉框，这是一个常见的需求，特别是在构建多级选择或依赖性选择菜单时。 联动下拉框通常指的是两个或多个下拉框之间存在关联关系，当用户在一个下拉框中选择一个选项时...
在Web开发中，动态下拉框是一种常见的交互元素，它允许用户从下拉列表中选择数据，这些数据通常是根据某些条件动态加载的。本文将详细介绍如何使用Ajax实现动态下拉框的功能。 Ajax（Asynchronous JavaScript and ...
在网页开发中，"下拉框多选 js动态实现"是一个常见的交互需求，尤其是在表单设计和数据筛选中。这个需求通常涉及到HTML、CSS和JavaScript技术的结合使用，特别是JavaScript库如jQuery或者其他自定义JS代码，来实现...
### 使用JavaScript实现下拉框的动态控制 #### 引言 在Web开发中，下拉框作为用户界面的重要组成部分，提供了高效的选择机制，允许用户从一组预设的选项中进行选择。然而，静态的下拉框往往无法满足复杂的业务需求...
在我们浏览网页的时候经常会碰到下拉框，WebDriver提供了Select类来处理下拉框，详情请往下看： 本章中用到的关键方法如下： select_by_value()：设置下拉框的值 switch_to.alert.accept()：定位并接受现有警告框...
3. 可访问性：确保动态下拉框仍然对屏幕阅读器和其他辅助技术友好。 综上所述，创建美观且动态的下拉框是提高网页交互体验的关键一步。通过结合CSS样式调整和JavaScript库的使用，我们可以打造出既实用又具有吸引力...
最近小弟做了Extjs实现实现下拉框联动的效果，参考了好久才学会，闲下来发一个简单的例子。。呵呵
4. **动态显示列表**：列表的显示和隐藏可以通过改变其显示属性（如`visible`或`active`）来控制。同时，为了实现下拉效果，可能需要调整列表的位置，使其相对于按钮下方对齐。 5. **交互处理**：当用户在列表中...
4. UI渲染：根据过滤后的数据和已选项目数组，动态渲染下拉框内的选项和已选项的状态。 四、优化与兼容性 在实际开发中，需要注意性能优化，特别是在处理大量数据时。可以通过懒加载或分页策略来减少初始加载的...