英溯IT论坛

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 957|回复: 0

SELECT 下拉框搜索实现模糊查询(JS+SELECT标签实现)

[复制链接]

105

主题

113

帖子

588

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
588
发表于 2021-7-8 13:09:19 | 显示全部楼层 |阅读模式



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META content="fason,阿信" name=Author>
<title>动态提示的下拉框</title>
<style>

</style>
</head>
<body>
<center>
<h2>动态提示的下拉框</h2>
<hr>
<form name=newform>
<table>
  <tr>
    <td>请输入1或2或3或4或5进行测试:<br><input name="txtPlace" style="width:100px"> </td>
  </tr>
  <tr>
    <td>
<span id="myselect">  <select name="myselect" style="width:100px" size=10 id="sq2" >
    <option value="1">1</option>
    <option value="12">12</option>
    <option value="123">123</option>
    <option value="1234">1234</option>
    <option value="2">2</option>
    <option value="23">23</option>
    <option value="234">234</option>
    <option value="2345">2345</option>
</span>    </select>
    </td>
  </tr>
</form>
</table>


<hr>
<td>

<script language="javascript">
var TempArr=[];//存贮option

function Init(){
var SelectObj=document.newform.elements["myselect"]
/*先将数据存入数组*/
with(SelectObj)
    for(i=0;i<length;i++)TempArr=[options.text,options.value]
}

function SelectTip(flag){
var TxtObj=document.newform.elements["txtPlace"]
var SelectObj=document.getElementById("myselect")
var Arr=[]
with(SelectObj){
    var SelectHTML=innerHTML.match(/<[^>]*>/)[0]
    for(i=0;i<TempArr.length;i++)
    if(TempArr[0].indexOf(TxtObj.value)!=-1||flag)//数组中若找到输入的内容,添option。若flag为true,对下拉框初始化
    Arr[Arr.length]="<option value='"+TempArr[1]+"'>"+TempArr[0]+"</option>"
    innerHTML=SelectHTML+Arr.join()+"</SELECT>"
}
}
</script>
</body>

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|英溯IT论坛 ( 沪ICP备13022730号-6 )

GMT+8, 2024-12-22 15:21 , Processed in 0.123006 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表