您的位置：首页 > 其它

可输入的下拉框

2014-03-01 22:10 141 查看
一、碎碎念：是我的第一篇博文，事实上我的草稿箱里不止这一篇。技术方面对自己没什么信心，总想反复推敲将所有的问题考虑到再发表，可是所谓的“所有问题”总是那么多~（又没有谁规定一定不能犯错），写的好方便大家学习交流，写的不好也请大家多多提意见，共同学习~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>
三、非常感谢大家的阅读，文章中有不妥的地方还请大家一定多提意见，再见啦！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航