<!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=UTF-8" />
<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>
<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>
</body>
</html>
分享到：
相关推荐
在给定的标题“自定义AutoCompleteTextView下拉列表控件”中，我们可以理解为开发者想要超越Android原生`AutoCompleteTextView`的功能，创建一个更加定制化的版本，以满足特定需求。描述中提到“扩展Android系统自带...
`div模拟select自定义下拉列表框`是一种常见做法，它利用JavaScript（如jQuery）和CSS来实现，可以提供比原生`<select>`元素更丰富的样式控制和交互体验。本篇将详细介绍这种技术及其应用。 一、为什么使用div模拟...
在实际操作中，你可能需要对`QComboBox`的下拉列表部分和非下拉部分分别设置样式，因为它们在默认情况下可能会有不同的样式。例如，可以通过`::drop-down`和`::down-arrow`伪元素来定制下拉按钮和向下箭头的样式。 ...
在Android平台上，自定义下拉列表是一个常见的需求，特别是在创建用户界面时，为了提供良好的交互体验，开发者常常需要实现类似于Spinner的功能，但又不希望它弹出一个对话框（Dialog）。在这种情况下，我们可以使用...
在自定义下拉列表时，我们可以利用CSS来改变默认的样式，例如字体、颜色、大小、背景色、边框等，使得下拉列表与页面整体风格保持一致。此外，通过CSS可以实现悬停、选中和焦点状态的动态效果，提升用户体验。 接...
默认的select下拉列表，很多客户都不太喜欢，当然，也包括我们自己已经看腻了 今天特意给大家推荐一款可以美化select下拉列表的插件——jquery.custom-select.js 只有十几KB大小，完全不影响网速加载 ...
在Android开发中，自定义下拉列表是一种常见的交互方式，用于提供用户选择多个选项的界面。本主题将深入探讨如何使用PopupWindow来实现一个自定义的下拉列表，使其宽度与触发它的控件（通常是Spinner）保持一致，...
4. **自定义弹出列表**：默认情况下，Spinner的下拉列表样式是系统提供的。如果你想要改变这个样式，可以创建一个新的布局文件，然后在自定义Adapter的`getDropDownView()`方法中使用这个布局。这样，当用户点击...
DropKick 可用来对下列列表的样式进行自定义，效果很炫。比较纠结的是对 IE 不支持。 标签：DropKick
在`MySpinnerDemo`项目中，我们将看到一个简易封装的自定义下拉列表源码，旨在使代码更加清晰易懂。 首先，自定义`Spinner`的核心在于创建一个继承自`android.widget.Spinner`的类。这个新的类可以重写父类的方法，...
开发者可能已经实现了与这个库集成，使得自定义下拉列表可以应用各种皮肤样式。 3. **事件处理**：通过分析Unit2.pas和frmSearchList.pas的代码，我们可以找到与下拉列表交互相关的事件处理函数，比如OnDropDown、...
控件有个DropDownControl属性，你可以指定给这个控件点下拉按钮时弹出datagridview,richTextBox等等系统控件甚至是自己定义的UserControl控件。。。下载后自己看吧，有源码有示例有真像
android自定义Spinner下拉菜单(下拉列表框)样式
"jquery+css3实现的图片式自定义下拉列表框效果.zip" 提供了一种创新的方法，通过结合jQuery JavaScript库和CSS3技术来提升传统下拉列表的视觉吸引力和功能性。本文将深入探讨这个主题，解析如何利用jQuery和CSS3...
本资源提供了五种自定义的下拉菜单列表样式DEMO，旨在为用户带来新颖且美观的交互体验，同时确保了与主流浏览器的兼容性。 首先，我们要了解JavaScript在其中的作用。JavaScript是一种客户端脚本语言，它允许我们在...
- 自定义下拉列表的显示方式，如分组、多列显示，或者设置滚动条。 3. **事件处理与交互**： - 监听ComboBox的onChange、onClick等事件，实现联动效果或其他业务逻辑。 - 自定义弹出下拉列表的行为，例如设置...
创建自定义下拉列表框控件时，你需要关注以下几个关键点： 1. **布局设计**：自定义控件通常涉及到XML布局文件的编写，定义控件的外观和结构。`XCDropDownListView`可能包含了可展开和收起的列表视图，以及一个触发...
自定义下拉列表通常需要自定义Adapter，以便展示特定的数据格式，如图文混排、自定义布局等。 4. **PopupWindow**：为了实现下拉效果，我们可能会使用PopupWindow。PopupWindow可以创建浮动窗口，模拟下拉菜单的...
6. **Transition**: 可以添加动画效果，如展开和关闭下拉列表时的平滑过渡。 以下是一个简单的自定义Combobox的QML代码示例： ```qml import QtQuick 2.0 import QtQuick.Controls 2.15 Item { id: ...
自定义下拉选择列表的核心是其布局设计。首先，创建一个XML布局文件（例如`popup_window.xml`），该文件包含一个ListView或RecyclerView，它们将承载我们的选项列表。我们可以自定义每个列表项的样式，包括字体、...