三个javascript动态输入列表

 

< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
< meta http - equiv = " Content-Type " content = " text/html; charset=gb2312 " / >
< title > 无标题文档 < / title>
< script type = " text/javascript " >
function selValue(){
document.getElementById( " divValue " ).style.display = " block " ;
}
function closeDiv(isSave){
if (isSave){
var result = [];
var chk = document.getElementsByName( " chk " );
for ( var i = 0 ; i < chk.length; i ++ ){
if (chk[i].checked)
result.push(chk[i].value);
}
document.getElementById( " txt " ).value = result.join( " , " );
}
document.getElementById( " divValue " ).style.display = " none " ;
}
< / script>
< / head>

< body >
< div >
测试: < input type = " text " id = " txt " name = " txt " / > <a href="javascript:selValue();">选值< / a >
< div id = " divValue " style = " display:none;position:absolute; width:200px; height:130px; border:1px solid #006699; background:#F5F6FB; padding:5px; line-height:22px; " >
< input type = " checkbox " id = " chk1 " name = " chk " value = " 1 " / >1<br / >
< input type = " checkbox " id = " chk2 " name = " chk " value = " 2 " / >2<br / >
< input type = " checkbox " id = " chk3 " name = " chk " value = " 3 " / >3<br / >
< input type = " checkbox " id = " chk4 " name = " chk " value = " 4 " / >4<br / >
< input type = " checkbox " id = " chk5 " name = " chk " value = " 5 " / >5<br / >
< a href = " javascript:closeDiv(true); " > 确定 < / a> &nbsp;&nbsp;
< a href = " javascript:closeDiv(false) " > 取消 < / a>
< / div>
< / div>
< / body>
< / html>

 

< html >
< head >
< meta http - equiv = " Content-Type " content = " text/html; charset=gb2312 " >
< META content = " fason,阿信 " name = Author >
< title > 动态提示的下拉框 < / title>
< style >
a{color:red;text - decoration:none;font - size:12px}
< / style>
< / head>
< body onload = " Init() " >
< form name = frm >
< table >
< tr >
< td >
< input name = " txt " style = " width:100px " onkeyup = " SelectTip() " >
< input type = " button " value = " reset " onclick = " Init() " >< br / >
以此字串开始 < input type = " radio " name = " sflag " onclick = " sflg(0) " checked >
以此字串结束 < input type = " radio " name = " sflag " onclick = " sflg(1) " >
包含此字串 < input type = " radio " name = " sflag " onclick = " sflg(2) " >
不包含此字串 < input type = " radio " name = " sflag " onclick = " sflg(3) " >
< / td>
< / tr>
< tr >
< td >
< span id = " demo1 " >
< select name = " demo " style = " width:100px " size = 10 sFlag = 0 onchange = " txt.value=options[selectedIndex].text; " >
< / select>
< / span>
< / td>
< / tr>
< / form>
< / table>

< script language = " javascript " >
var SelectOptions = [
[ " 1 " , " 1 " ],
[ " 12 " , " 12 " ],
[ " 123 " , " 123 " ],
[ " 1234 " , " 1234 " ],
[ " 2 " , " 2 " ],
[ " 22 " , " 22 " ],
[ " 223 " , " 223 " ],
[ " 2234 " , " 2234 " ],
[ " 3 " , " 3 " ],
[ " 32 " , " 32 " ],
[ " 323 " , " 323 " ],
[ " 3234 " , " 3234 " ],
[ " 4 " , " 4 " ],
[ " 42 " , " 42 " ],
[ " 423 " , " 423 " ],
[ " 4234 " , " 4234 " ],
[ " 5 " , " 5 " ],
[ " 51 " , " 51 " ],
[ " 51w " , " 51w " ],
[ " 51wi " , " 51wi " ],
[ " 51win " , " 51win " ],
[ " 51wind " , " 51wind " ],
[ " 51windowns " , " 51windows " ]
]; // 存贮option

/* 初始化选择框 */
function Init()
{
var TxtObj = document.frm.elements[ " txt " ]
TxtObj.value = "" ;

var SelectObj = document.frm.elements[ " demo " ]
SelectObj.innerText = "" ;
for (i = 0 ;i < SelectOptions.length;i ++ )
{
var aElement = document.createElement( " OPTION " );
SelectObj.appendChild(aElement);
aElement.value = SelectOptions[i][ 0 ];
aElement.innerText = SelectOptions[i][ 1 ];
}
}
function sflg(n){
var SelectObj = document.frm.elements[ " demo " ]
SelectObj.sFlag = n;
SelectTip();
}


function SelectTip(){
var TxtObj = document.frm.elements[ " txt " ]
if (TxtObj.value.length == 0 ) return ;

var SelectObj = document.frm.elements[ " demo " ]
SelectObj.innerText = "" ;
for (i = 0 ;i < SelectOptions.length;i ++ )
{
if (SelectObj.sFlag == 0 && SelectOptions[i][ 1 ].indexOf(TxtObj.value) != 0 ) continue ; // 以此字串开始;
if (SelectObj.sFlag == 1 && (SelectOptions[i][ 1 ].length < TxtObj.value.length || SelectOptions[i][ 1 ].indexOf(TxtObj.value) != (SelectOptions[i][ 1 ].length - TxtObj.value.length))) continue ; // 以此字串结束;
if (SelectObj.sFlag == 2 && SelectOptions[i][ 1 ].indexOf(TxtObj.value) ==- 1 ) continue ; // 包含此字串;
if (SelectObj.sFlag == 3 && SelectOptions[i][ 1 ].indexOf(TxtObj.value) !=- 1 ) continue ; // 不包含此字串;
var aElement = document.createElement( " OPTION " );
SelectObj.appendChild(aElement);
aElement.value = SelectOptions[i][ 0 ];
aElement.innerText = SelectOptions[i][ 1 ];
}

}
< / script>
< / body>

 

< html >
< head >
< SCRIPT type = " text/javascript " >
function filterlist(selectobj) {
this .selectobj = selectobj;
this .optionscopy = new Array();
for ( var i = 0 ; i < selectobj.options.length; i ++ ) {
this .optionscopy[i] = new Option();
this .optionscopy[i].text = selectobj.options[i].text;
this .optionscopy[i].value = selectobj.options[i].value;
}

this .reset = function () {
this .set( "" );
}

this .set = function (pattern) {
var loop = 0 , index = 0 , regexp, e;
this .selectobj.options.length = 0 ;
try {
regexp = new RegExp(pattern, " i " );
} catch (e) {
return ;
}

for (loop = 0 ; loop < this .optionscopy.length; loop ++ ) {
if (regexp.test( this .optionscopy[loop].text)) {
this .selectobj.options.length = index + 1 ;
this .selectobj.options[index].text = this .optionscopy[loop].text;
this .selectobj.options[index].value = this .optionscopy[loop].value;
this .selectobj.options[index].selected = false ;
index ++ ;
}
}
}
}
< / SCRIPT>
< / head>
< body >
< FORM name = " myform " action = "" >
< SELECT size = 5 name = myselect >
< OPTION > VeryAsp
< OPTION > Laurence Fishburne
< OPTION > Monica Bellucci
< OPTION > Daniel Bernhardt
< OPTION > Nona Gaye
< OPTION > Lachy Hulme
< OPTION > Nathaniel Lees
< OPTION > Harry J. Lennix
< OPTION > Matt McColm
< OPTION > Carrie - Anne Moss
< OPTION > Collin Chou
< OPTION > Genevieve O ' Reilly
<OPTION>Harold Perrineau Jr.
<OPTION>Jada Pinkett Smith
<OPTION>Adrian Rayment
<OPTION>Neil Rayment
<OPTION>Bruce Spence
<OPTION>Hugo Weaving
<OPTION>Lambert Wilson
<OPTION>Anthony Wong
<OPTION>Walter O ' Riley
< OPTION > Zach Taylor
< OPTION > Yuri Andropov
< OPTION > Xavier
< OPTION > Tom Selleck
< OPTION > Heather Graham
< OPTION > Ursula Andrews
< OPTION > Victoria Jackson
< OPTION > Vivian Vance
< OPTION > Star Jones
< OPTION > Steve McQueen < / OPTION>
< / SELECT>

< SCRIPT type = text / javascript>
var myfilter = new filterlist(document.myform.myselect);
< / SCRIPT>

< P > Filter by regular expression: < BR >< INPUT onkeyup = myfilter.set( this .value) name = regexp >< / p>
< / FORM>
< / body>
< / html>

 

 

转载于:https://www.cnblogs.com/icedog/archive/2010/12/08/1900772.html