<!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" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>用javascript美化Select</title>
<script type="text/javascript">
var childCreate=false;
function Offset(e)
//取标签的绝对位置
{
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight-2;
while(e=e.offsetParent)
{
t+=e.offsetTop;
l+=e.offsetLeft;
}
return {
top : t,
left : l,
width : w,
height : h
}
}
function loadSelect(obj){
//第一步：取得Select所在的位置
var offset=Offset(obj);
//第二步：将真的select隐藏
obj.style.display="none";
//第三步：虚拟一个div出来代替select
var iDiv = document.createElement("div");
iDiv.id="selectof" + obj.name;
iDiv.style.position = "absolute";
iDiv.style.width=offset.width + "px";
iDiv.style.height=offset.height + "px";
iDiv.style.top=offset.top + "px";
iDiv.style.left=offset.left + "px";
iDiv.style.background="url(/articleimg/2007/04/4687/icon_select.gif) no-repeat right 4px";
iDiv.style.border="1px solid #3366ff";
iDiv.style.fontSize="12px";
iDiv.style.lineHeight=offset.height + "px";
iDiv.style.textIndent="4px";
document.body.appendChild(iDiv);
//第四步：将select中默认的选项显示出来
var tValue=obj.options[obj.selectedIndex].innerHTML;
iDiv.innerHTML=tValue;
//第五步：模拟鼠标点击
iDiv.onmouseover=function(){//鼠标移到
iDiv.style.background="url(/articleimg/2007/04/4687/icon_select_focus.gif) no-repeat right 4px";
}
iDiv.onmouseout=function(){//鼠标移走
iDiv.style.background="url(/articleimg/2007/04/4687/icon_select.gif) no-repeat right 4px";
}
iDiv.onclick=function(){//鼠标点击
if (document.getElementById("selectchild" + obj.name)){
//判断是否创建过div
if (childCreate){
//判断当前的下拉是不是打开状态，如果是打开的就关闭掉。是关闭的就打开。
document.getElementById("selectchild" + obj.name).style.display="none";
childCreate=false;
}else{
document.getElementById("selectchild" + obj.name).style.display="";
childCreate=true;
}
}else{
//初始一个div放在上一个div下边，当options的替身。
var cDiv = document.createElement("div");
cDiv.id="selectchild" + obj.name;
cDiv.style.position = "absolute";
cDiv.style.width=offset.width + "px";
cDiv.style.height=obj.options.length *20 + "px";
cDiv.style.top=(offset.top+offset.height+2) + "px";
cDiv.style.left=offset.left + "px";
cDiv.style.background="#f7f7f7";
cDiv.style.border="1px solid silver";
var uUl = document.createElement("ul");
uUl.id="uUlchild" + obj.name;
uUl.style.listStyle="none";
uUl.style.margin="0";
uUl.style.padding="0";
uUl.style.fontSize="12px";
cDiv.appendChild(uUl);
document.body.appendChild(cDiv);
childCreate=true;
for (var i=0;i<obj.options.length;i++){
//将原始的select标签中的options添加到li中
var lLi=document.createElement("li");
lLi.id=obj.options[i].value;
lLi.style.textIndent="4px";
lLi.style.height="20px";
lLi.style.lineHeight="20px";
lLi.innerHTML=obj.options[i].innerHTML;
uUl.appendChild(lLi);
}
var liObj=document.getElementById("uUlchild" + obj.name).getElementsByTagName("li");
for (var j=0;j<obj.options.length;j++){
//为li标签添加鼠标事件
liObj[j].onmouseover=function(){
this.style.background="gray";
this.style.color="white";
}
liObj[j].onmouseout=function(){
this.style.background="white";
this.style.color="black";
}
liObj[j].onclick=function(){
//做两件事情，一是将用户选择的保存到原始select标签中，要不做的再好看表单递交后也获取不到select的值了。
obj.options.length=0;
obj.options[0]=new Option(this.innerHTML,this.id);
//同时我们把下拉的关闭掉。
document.getElementById("selectchild" + obj.name).style.display="none";
childCreate=false;
iDiv.innerHTML=this.innerHTML;
}
}
}
}
}
</script>
<style type="text/css">
select{width:200px;height:20px;}
</style>
</head>
<body>
<h1>用javascript模拟select达到美化效果</h1>
<form name="f">
<fieldset>
<legend>用户注册</legend>
<div>
<label for="username">帐号</label>
<input type="text" id="username" name="username" />
</div>
<div>
<label for="pwd">密码</label>
<input type="password" name="pwd" id="pwd" />
</div>
<div>
<label for="province">省份</label>
<select id="province" name="province">
<option value="10">江西</option>
<option value="11">福建</option>
<option value="12">广东</option>
<option value="13">浙江</option>
</select>
</div>
</fieldset>
<input type="submit" value="提交" name="btnSub" />
</form>
<script type="text/javascript">
loadSelect(document.f.province);
</script>
<p>
<a href="http://www.iwcn.net">作者博客</a>
</p>
</body>
</html>
<a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>用javascript美化Select</title>
<script type="text/javascript">
var childCreate=false;
function Offset(e)
//取标签的绝对位置
{
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight-2;
while(e=e.offsetParent)
{
t+=e.offsetTop;
l+=e.offsetLeft;
}
return {
top : t,
left : l,
width : w,
height : h
}
}
function loadSelect(obj){
//第一步：取得Select所在的位置
var offset=Offset(obj);
//第二步：将真的select隐藏
obj.style.display="none";
//第三步：虚拟一个div出来代替select
var iDiv = document.createElement("div");
iDiv.id="selectof" + obj.name;
iDiv.style.position = "absolute";
iDiv.style.width=offset.width + "px";
iDiv.style.height=offset.height + "px";
iDiv.style.top=offset.top + "px";
iDiv.style.left=offset.left + "px";
iDiv.style.background="url(/articleimg/2007/04/4687/icon_select.gif) no-repeat right 4px";
iDiv.style.border="1px solid #3366ff";
iDiv.style.fontSize="12px";
iDiv.style.lineHeight=offset.height + "px";
iDiv.style.textIndent="4px";
document.body.appendChild(iDiv);
//第四步：将select中默认的选项显示出来
var tValue=obj.options[obj.selectedIndex].innerHTML;
iDiv.innerHTML=tValue;
//第五步：模拟鼠标点击
iDiv.onmouseover=function(){//鼠标移到
iDiv.style.background="url(/articleimg/2007/04/4687/icon_select_focus.gif) no-repeat right 4px";
}
iDiv.onmouseout=function(){//鼠标移走
iDiv.style.background="url(/articleimg/2007/04/4687/icon_select.gif) no-repeat right 4px";
}
iDiv.onclick=function(){//鼠标点击
if (document.getElementById("selectchild" + obj.name)){
//判断是否创建过div
if (childCreate){
//判断当前的下拉是不是打开状态，如果是打开的就关闭掉。是关闭的就打开。
document.getElementById("selectchild" + obj.name).style.display="none";
childCreate=false;
}else{
document.getElementById("selectchild" + obj.name).style.display="";
childCreate=true;
}
}else{
//初始一个div放在上一个div下边，当options的替身。
var cDiv = document.createElement("div");
cDiv.id="selectchild" + obj.name;
cDiv.style.position = "absolute";
cDiv.style.width=offset.width + "px";
cDiv.style.height=obj.options.length *20 + "px";
cDiv.style.top=(offset.top+offset.height+2) + "px";
cDiv.style.left=offset.left + "px";
cDiv.style.background="#f7f7f7";
cDiv.style.border="1px solid silver";
var uUl = document.createElement("ul");
uUl.id="uUlchild" + obj.name;
uUl.style.listStyle="none";
uUl.style.margin="0";
uUl.style.padding="0";
uUl.style.fontSize="12px";
cDiv.appendChild(uUl);
document.body.appendChild(cDiv);
childCreate=true;
for (var i=0;i<obj.options.length;i++){
//将原始的select标签中的options添加到li中
var lLi=document.createElement("li");
lLi.id=obj.options[i].value;
lLi.style.textIndent="4px";
lLi.style.height="20px";
lLi.style.lineHeight="20px";
lLi.innerHTML=obj.options[i].innerHTML;
uUl.appendChild(lLi);
}
var liObj=document.getElementById("uUlchild" + obj.name).getElementsByTagName("li");
for (var j=0;j<obj.options.length;j++){
//为li标签添加鼠标事件
liObj[j].onmouseover=function(){
this.style.background="gray";
this.style.color="white";
}
liObj[j].onmouseout=function(){
this.style.background="white";
this.style.color="black";
}
liObj[j].onclick=function(){
//做两件事情，一是将用户选择的保存到原始select标签中，要不做的再好看表单递交后也获取不到select的值了。
obj.options.length=0;
obj.options[0]=new Option(this.innerHTML,this.id);
//同时我们把下拉的关闭掉。
document.getElementById("selectchild" + obj.name).style.display="none";
childCreate=false;
iDiv.innerHTML=this.innerHTML;
}
}
}
}
}
</script>
<style type="text/css">
select{width:200px;height:20px;}
</style>
</head>
<body>
<h1>用javascript模拟select达到美化效果</h1>
<form name="f">
<fieldset>
<legend>用户注册</legend>
<div>
<label for="username">帐号</label>
<input type="text" id="username" name="username" />
</div>
<div>
<label for="pwd">密码</label>
<input type="password" name="pwd" id="pwd" />
</div>
<div>
<label for="province">省份</label>
<select id="province" name="province">
<option value="10">江西</option>
<option value="11">福建</option>
<option value="12">广东</option>
<option value="13">浙江</option>
</select>
</div>
</fieldset>
<input type="submit" value="提交" name="btnSub" />
</form>
<script type="text/javascript">
loadSelect(document.f.province);
</script>
<p>
<a href="http://www.iwcn.net">作者博客</a>
</p>
</body>
</html>
<a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>
分享到：
发表评论
-
db2, oracle和sqlserver取前几行的语法
2010-10-18 11:58 938db2： select * from tab f ... -
项目总结（Ajax＋Struts＋Spring＋Hiberante＋SQLServer2000） 第一部分 (转载)
2008-03-29 16:49 673总算将一个项目勉强上线，也是第一次我独立完成的这么多任务，框架 ... -
实例学习Spring和Hibernate的一点点体会 (转载)
2008-03-29 17:36 783昨天用Spring写DAO,有朋友说比较Hibernate还是 ... -
jsp+xsl查询数据库
2008-04-06 19:26 1022往往JSP通常用来动态的生成HTML文件，来 ... -
hibernate3.0中文查询问题解决方法
2008-04-07 13:08 733在applicationContext.xml中加入如下代码： ... -
简单的JSTL应用（入门）
2008-04-07 19:51 1011需要的包及TLD文件: 首先需要将用到的jar包放入WEB-I ... -
EL表达式语言
2008-04-09 00:30 688引用：http://blog.163.com/s_zhchlu ... -
使用COOKIE登录验证（转载）
2008-04-21 20:11 1517附加功能：登录成功后 ... -
JavaMail
2008-04-30 13:19 647package org.hank.mail;import ... -
用"window.showModalDialog()"实现DIV模式弹出窗口 (转)
2008-05-04 09:20 17701、test.html 测试页 <html> ... -
以二进制流的方式存取图像
2008-05-07 00:03 1231imageinfo.sql CREATE TABLE ... -
java 生成图片缩略图
2008-05-08 13:26 7171方法一: import javax.imageio.Image ... -
一个不错的弹出窗口的js效果(值的收藏)
2008-06-02 19:00 1110<script type="text/jav ... -
<c:forEach>&条件标签使用
2008-06-06 09:57 7097<c:forEach>标签的使 ... -
div 缓慢下拉效果
2008-06-10 18:05 1518<!DOCTYPE html PUBLIC " ... -
弹出窗口传值
2008-06-13 09:07 905子窗口中内容： function change(obj){ ... -
Action之间传值
2008-06-13 09:13 860return new ActionForward(" ... -
数据库连接池简介
2008-06-15 14:30 737数据库连接是一种关键的有限的昂贵的资源，这一点在多用户的网页应 ... -
Spring的事务管理
2008-06-15 14:32 424Spring提供了一致的事务管理抽象。这个抽象是Sprin ... -
form产生的空行的解决
2008-06-16 16:32 676利用css属性，将form的内部上下左右的填充距离设置为0就好 ...
相关推荐
本资源"jquery美化下拉列表.rar"显然是一个关于如何使用jQuery来提升下拉列表视觉效果的示例集。 jQuery美化下拉列表的核心是利用jQuery插件来替代或扩展原生HTML元素的功能和样式。这些插件通常会提供自定义的CSS...
最后，`images`文件夹可能包含了一些图标或图形资源，用于美化下拉列表或增强其功能，例如搜索图标、加载指示器等。 总之，这款JavaScript下拉列表组件提供了一种高效、灵活的解决方案，以满足各种网页应用中的选择...
通过上述的方法，开发者可以解决select下拉列表在不同浏览器下默认样式不一致的问题，并通过JavaScript为用户提供更加美观和友好的交互体验。同时，使用这种方法也可以增强select的功能，比如添加搜索功能，支持多选...
今天特意给大家推荐一款可以美化select下拉列表的插件——jquery.custom-select.js 只有十几KB大小，完全不影响网速加载 使用方法： 1、将head中的css样式引入到你的页面中 2、将body中的代码部分...
在本教程中，我们将探讨如何使用HTML、CSS和JavaScript创建优美且用户友好的下拉列表样式。 首先，HTML是构建网页的基础，下拉列表通过`<select>`标签来创建。我们可以这样编写基本的HTML代码： ```html 选项1 ...
2. **CSS美化**：为了改变默认的下拉列表样式，我们需要用CSS来覆盖浏览器自带的样式。可以定义字体、颜色、背景、边框等属性，甚至可以创建自定义的下拉箭头。同时，对于四级菜单，可能需要设定更复杂的布局规则，...
为了美化下拉列表，JavaScript可能需要动态地修改元素的CSS属性，如背景色、字体、边框、内边距等，以达到一致的设计风格。 6. **键盘导航** 为了提供无障碍访问，优化的下拉列表还应支持键盘导航，如使用上下...
综上所述，"pickout-纯JS炫酷下拉列表框美化插件" 提供了一种增强网页下拉列表视觉效果和交互体验的方法，涉及到了JavaScript编程、HTML结构、CSS样式、动画效果等多个技术领域。对于前端开发者来说，掌握这些知识点...
为了美化下拉列表，我们可以从以下几个方面入手： 1. **颜色和大小调整**：Bootstrap提供了多种预定义的按钮类（如`btn-primary`, `btn-success`, `btn-info`, `btn-warning`, `btn-danger`）来改变按钮颜色。同时...
总的来说，"纯JS炫酷下拉列表框美化插件pickout"是一个有助于提升网页用户体验的工具，通过JavaScript实现，提供了一种无需依赖其他库的美化下拉列表框的解决方案。开发者可以借此增强网页的互动性和美观性，同时...
总结起来，设置CSS样式来美化下拉列表`<select>`并非易事，但通过理解浏览器的限制，以及利用JavaScript和自定义组件，我们可以创建出具有独特风格的交互式下拉列表。在实际开发中，要时刻关注用户体验，确保在美观...
3. **img**：这个文件夹可能包含一些用于美化下拉列表框的图像资源，如背景图片或图标。这些图片可能会被CSS引用，以增强视觉效果。 4. **js**：这个文件夹包含JavaScript代码，可能命名为`script.js`。这个文件...
总的来说，"JS城市配送下拉列表美化表单"是电商网站提高用户体验的一个重要组件，它利用JavaScript和CSS等技术优化了传统的配送地址选择流程，使用户在填写配送信息时更加顺畅，从而提升了网站的整体专业性和用户...
例如，使用CSS对下拉列表的样式进行自定义，使用JavaScript（可能引入外部的JavaScript库）来控制下拉列表的行为和样式的变化。注释"[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]"暗示了这可能涉及到脚本的操作，...
为了美化这个下拉列表，通常会用一个自定义的HTML结构来覆盖原生的`<select>`元素，比如使用一个按钮或一个带有标题的容器来触发下拉列表的显示。 2. **CSS样式**： `css`文件用于定义下拉列表的外观。你可以设置...
压缩包中的`index.html`可能是示例代码，`css`文件夹包含了CSS样式，`images`可能包含了一些用于美化下拉菜单的图片资源，而`js`文件夹则可能包含了实现交互效果的JavaScript代码。通过阅读这些文件，你可以更深入地...