可输入的下拉框

最新推荐文章于 2019-10-27 11:54:03 发布

天株

最新推荐文章于 2019-10-27 11:54:03 发布

阅读量849

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习笔记文章标签：技术 js select

本文链接：https://blog.youkuaiyun.com/u013551707/article/details/20156905

前端学习笔记专栏收录该内容

4 篇文章

订阅专栏

一、碎碎念：是我的第一篇博文，事实上我的草稿箱里不止这一篇。技术方面对自己没什么信心，总想反复推敲将所有的问题考虑到再发表，可是所谓的“所有问题”总是那么多~（又没有谁规定一定不能犯错），写的好方便大家学习交流，写的不好也请大家多多提意见，共同学习~go~

二、制作一个可输入又可选择的下拉框：

解题思路： 1、首先网页上有两个组件：一个下拉框，一个文本框。

2、将文本框附在下拉框之上，使下拉框只露出下拉的箭头（视觉上造成是一个下拉框的效果~稍后上图就清晰多了~）

3、写js函数，将下拉框选中的内容赋给文本框

4、ok！！！

分步讲解：1、初态：

2、应用position属性之后，我们能看到下拉框不见了，实际上下拉框是被文本框覆盖了，感兴趣的同学可以验证一下，我的下一篇博文会有详细的介绍哦~：

3、调整下拉框的大小：

4、不要以为调整大小是很简单的事情，我觉得很麻烦啊啊啊，总之考虑的挺多的，border的大小，还有margin等，总之，自己一定动手尝试一下才好。以下是在调整过程中出现的情况：

5、事实上我不太想贴代码，一是不提倡这种学习方法，二来……写的不好惹大家笑话。。。我担心自己的表述不太清楚，还是贴一下吧！顺便说一下，这个思路不是我想的，我也是在网上看的思路，可是代码什么的绝对没有抄袭别人的哦~看，做起来也不是很难，所以，赶紧自己动手试试吧！加油！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
function text_select(){
	var selec=document.getElementsByTagName("option");
	//alert(selec[0].selected);
	var text=document.getElementById("ok");
	//alert("success!!!");
	var i=0;
	for(i in selec){
		if(selec[i].selected) text.value=selec[i].text;
		}
}
</script>
<style>
select{		position: absolute;
			width: 171px;
			margin-left: 2px;
			height: 22px;}
input{
			position:absolute;
			height:16px;}
</style>
</head>
<body>
<select onchange="text_select();">
	<option value="广州">广州</option>
	<option value="上海">上海</option>
	<option value="厦门">厦门</option>
	<option value="福建">福建</option>
</select>
<input type="text" value="广州"  id="ok"/>
</body>
</html>

三、非常感谢大家的阅读，文章中有不妥的地方还请大家一定多提意见，再见啦！