javascript模拟select实现代码 - phpStudy

javascript模拟select实现代码

最近迷茫于javascript的闭包与继承，写一个小东西找找感觉。

这个作品在没有任何需求下完成，不保证能应用于实际应用，仅用于自娱自乐。

<style type="text/css"></style> 
<h2>浏览器默认样式</h2> 
<p> 
<select style="width: 200px; margin: 10px 30px; height: 22px; border: 1px solid #ccc; font-size: 14px; z-index: 0;"><option>select1</option><option>select2</option><option>select3</option><option>select4</option></select></p> 
<h2>js模拟select,样式主要参照IE8与Firefox。</h2> 
<ul> 
<li><input type="text" class="text" onclick="beginSelect(this);" /><span class="btn" onmousedown="beginSelect(this)"> </span></li> 
<li class="select"> 
<p>select1</p> 
<p>select2</p> 
<p>select3</p> 
<p>select4</p> 
</li> 
</ul> 
<p>在不改变HTML结构的前提下，可更改其它样式。建议用IE8与FF浏览，可与默认样式进行对比。</p> 
<script type="text/javascript">// <![CDATA[ 
function beginSelect(elem){ 
if(elem.className == "btn"){ 
elem.className = "btn btnhover" 
elem.onmouseup = function(){ 
this.className = "btn" 
} 
} 
var ul = elem.parentNode.parentNode; 
var li = ul.getElementsByTagName("li"); 
var selectArea = li[li.length-1]; 
if(selectArea.style.display == "block"){ 
selectArea.style.display = "none"; 
} 
else{ 
selectArea.style.display = "block"; 
mouseoverBg(selectArea); 
} 
} 
function mouseoverBg(elem1){ 
var input = elem1.parentNode.getElementsByTagName("input")[0]; 
var p = elem1.getElementsByTagName("p"); 
var pLength = p.length; 
for(var i = 0; i < pLength; i++){ 
p[i].onmouseover = showBg; 
p[i].onmouseout = showBg; 
p[i].onclick = postText; 
} 
function showBg(){ 
this.className == "hover"?this.className = " ":this.className = "hover"; 
} 
function postText(){ 
var selected = this.innerHTML; 
input.setAttribute("value",selected); 
elem1.style.display = "none"; 
} 
} 
// ]]></script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

在不改变HTML结构的前提下，可更改其它样式。建议用IE8与FF浏览，可与默认样式进行对比。

发布一来是为了记录自己学习过程，二来想请朋友指点一下迷津，哪些地方欠妥或者有更好的思路可以给我指点一下，谢谢。

«
»

PHP简介 PHP基本语法 PHP类型 PHP变量 PHP运算符 PHP控制结构 PHP函数 PHP类与对象 PHP异常处理函数库分类

快速导航

PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3