JS写的:既可以输入又可以取舍的selected
日期：2014-05-16 浏览次数：20548 次
JS写的:既可以输入又可以选择的selected
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<Script Language="JavaScript">
<!--
var whichText;
function selectStation(obj) {
var objSelStation = obj;
if (obj.selectedIndex != -1) {
var stationName = obj.options[obj.selectedIndex].text;
whichText.value = stationName;
}
}
//响应text的事件
var pageD =0, pageU;
function similarFind(txtObj,seledName) {
var curStationName = txtObj.value;
var objSelStation = eval("document.browser."+seledName);
var stationLength = objSelStation.options.length;
pageU = pageD;
//匹配用text中的数据跟下拉框中的数据
for (var i=0; i<stationLength; i++) {
var stationName = objSelStation.options[i].text;
var re = new RegExp("^" + curStationName);
if (stationName.match(re)) {
if (i<stationLength - 10) {
objSelStation.selectedIndex = i + 10;
}
objSelStation.selectedIndex = i;
pageD = i;
pageU = i;
break;
}
}
//响应下移键
if(event.keyCode==40) {
pageD++;
if(pageD==objSelStation.options.length) pageD=0;
txtObj.value=objSelStation.options[pageD].text ;
objSelStation.selectedIndex = pageD;
}
//响应上移键
if(event.keyCode==38) {
--pageU;
if(pageU<0) pageU=objSelStation.options.length-1;
txtObj.value = objSelStation.options[pageU].text;
objSelStation.selectedIndex = pageU;
}
}
//下拉框显示位置
function showDivStation(obj, b,selName) {
var divStation = eval("document.browser."+selName);
if (b) {
whichText = obj;
divStation.style.top = 20;
divStation.style.left = 0;
divStation.style.display="block";
similarFind(obj,selName);
} else {
divStation.style.display="none";
}
}
//-->
</Script>
<BODY bgcolor="#FFFFFF" topmargin="0" leftmargin="0">
<form name="browser" >
<table border="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
<tr>
<TD width="6%" valign="top">POSTCODE </TD>
<TD width="94%" bgcolor="#FFFFFF">
<input type="text" size="20" name="stationname" style="width:120" onfocus="showDivStation(this, true,'selStation')" onblur="showDivStation(this, false,'selStation')" onkeyup="similarFind(this,'selStation')" value="">
<select name="selStation" size="5" style="display:none;width:120; background-color:#CCCC99" onclick="selectStation(this)" onkeyup="selectStation(this)">
<option value="1" >aaa</option>
<option value="2" >aab</option>
<option value="3" >aac</option>
<option value="4" >aba</option>
<option value="5" >abb</option>
<option value="6" >abc</option>
<option value="7" >baa</option>
<option value="8" >bab</option>
<option value="9" >bac</option>
<option value="10" >caa</option>
<option value="11" >cab</option>
<option value="12" >cac</option>
</select>
</td>
</table>
</form>
</BODY>
</HTML>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
