input模拟select功能,点击显示下拉选项,但不要求能够模糊搜索选项。_百 ...
发布网友
发布时间：2022-04-26 19:01
共3个回答
热心网友
时间：2022-04-21 02:31
如果你只是想模仿一下，试试我这个代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>输入提示</title>
<script>
</script>
<style>
body {
font-family: "微软雅黑";
}
#search_box {
position: relative;
}
#search_box input {
font-family: "微软雅黑";
width: 160px;
outline: none;
padding: 5px;
border: 1px solid darkgray;
}
#search_box input:focus{
box-shadow: 1px 2px 7px rgba(10,10,10,0.2);
}
#search_box ul {
display: block;
padding: 0px;
margin: 0px;
width: 170px;
border: 1px solid darkgray;
border-top: none;
font-size: 13px;
list-style: none;
display: none;
}
#search_box li {
padding: 5px;
}
#search_box li:hover {
background: rgb(240, 240, 240);
}
</style>
</head>
<body>
<div id="search_box">
<input type="text" onfocus="document.getElementById('search_advice').style.display='block'" onblur="document.getElementById('search_advice').style.display='none'" placeholder="请输入" />
<ul id="search_advice">
<li>提示1</li>
<li>提示2</li>
<li>提示3</li>
<li>提示4</li>
<li>提示5</li>
</ul>
</div>
</body>
</html>
热心网友
时间：2022-04-21 03:49
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>_</title>
<style type="text/css">
.wrap input, .wrap select{
width:200px; margin:0, padding:0;
}
</style>
</head>
<body>
<div class="wrap">
<div><input type="text" id="txt" placeholder="请选择或输入" /></div>
<select size="6" id="sel" style="display:none">
<option>123</option>
<option>23456</option>
<option>1111</option>
<option>123333</option>
<option>aaaa</option>
<option>1bbb23</option>
</select>
</div>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
window.onload = function(){
$$("txt").onclick = function(){
$$("sel").style.display = "block"
};
$$("sel").onclick = function(){
this.style.display = "none"
$$("txt").value = this.options[this.selectedIndex].text;
};
};
</script>
</body>
</html>
追问你好！虽然这段代码在W3School测试可以用，但是还是用到了jquery，导致在现场环境中用不了！
追答你从哪里看到了jQuery,不要看到个$就是jQuery
热心网友
时间：2022-04-21 05:23
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<select id="sel" onChange="return select()">
<option></option>
<option>Chinese</option>
<option>English</option>
<option>math</option>
</select>
<script>
function select(){
var index = document.getElementById('sel').selectedIndex;
alert(index)
}
</script>
<body>
</body>
</html>追问你弄反了，不是选择下拉框弹出提示内容，而是点击输入框，下面会出现下拉框的选项
