<!DOCTYPE >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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(http://www.zcool.com.cn/pic/png5/130/pixelicious_001.png) no-repeat right -6px";
iDiv.style.border = "1px solid #ccc";
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('image/test.jpg') no-repeat right -6px";
}
iDiv.onmouseout = function() {//鼠标移走
iDiv.style.background = "url('image/test.jpg') no-repeat right -6px";
}
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">
<select id="PRovince" name="province">
<option value="10">江西</option>
<option value="11">福建</option>
<option value="12">广东</option>
<option value="13">浙江</option>
<option value="13">浙江</option>
<option value="13">北京</option>
<option value="13">上海</option>
<option value="13">浙江</option>
<option value="13">浙江</option>
<option value="13">浙江</option>
<option value="13">浙江</option>
<option value="13">浙江</option>
</select>
</form>
<script type="text/javascript">
loadselect(document.f.province);
</script>
</body>
</html>
分享到：
相关推荐
1. **jQuery基础**：了解jQuery的基本用法，如DOM操作、事件处理、动画效果等，这些都是美化下拉列表的基础。 2. **jQuery插件**：学习如何使用和编写jQuery插件，如Chosen、Select2、Selectize等，这些插件专门...
最后，`images`文件夹可能包含了一些图标或图形资源，用于美化下拉列表或增强其功能，例如搜索图标、加载指示器等。 总之，这款JavaScript下拉列表组件提供了一种高效、灵活的解决方案，以满足各种网页应用中的选择...
在现代网页设计中，select下拉列表是实现用户交互的一项基本元素，但在不同的浏览器中，其样式表现差异较大，且在自定义样式方面存在限制，尤其是无法完全通过CSS控制其外观。随着Web标准的推进，浏览器厂商对HTML...
为了美化下拉列表，我们可以从以下几个方面入手： 1. **颜色和大小调整**：Bootstrap提供了多种预定义的按钮类（如`btn-primary`, `btn-success`, `btn-info`, `btn-warning`, `btn-danger`）来改变按钮颜色。同时...
此时，jQuery插件ddlist应运而生，它是一款专门用于美化下拉列表菜单的工具，旨在提升用户交互体验并增强下拉列表的功能。 **一、ddlist插件的主要特点** 1. **图标支持**：ddlist允许开发者为每个选项添加图标，...
3. **img**：这个文件夹可能包含一些用于美化下拉列表框的图像资源，如背景图片或图标。这些图片可能会被CSS引用，以增强视觉效果。 4. **js**：这个文件夹包含JavaScript代码，可能命名为`script.js`。这个文件...
总的来说，Pickout.js是一个高效、灵活的JavaScript下拉列表框美化插件，能够帮助开发者提升表单控件的用户体验，同时保持代码的简洁性和性能。无论是在企业级应用还是个人项目中，它都是一个值得考虑的优秀选择。
在文档中提到的`Select`对象是JavaScript中用于操作下拉列表的一个重要对象。它具有几个关键属性： - `selectedIndex`：这个属性返回当前选中选项的索引值，索引值从0开始。这意味着，如果用户选中的是列表中的第一...
- **功能介绍**：FancySelect 是一个流行的下拉列表美化插件，它提供了自定义样式和增强的交互性，如搜索过滤、多选支持、动画效果等。 - **使用方法**：通常，通过引入 CSS 和 JS 文件，然后调用相应的初始化函数...
1. 下拉列表美化：文档的标题和描述强调了下拉列表的美观性，并提到适合使用在温馨风格的女性网站上。这说明在设计网站用户界面时，可以根据目标用户群体的偏好来定制下拉列表的外观。为了实现美观的下拉列表，设计...
根据给定的信息，我们可以提取并总结出关于“JavaScript 二级联动下拉列表”的知识点： ### 一、二级联动下拉列表概述 二级联动下拉列表是一种常见的网页交互设计模式，通常用于显示具有层级关系的数据。当用户在...
为了美化下拉列表，JavaScript可能需要动态地修改元素的CSS属性，如背景色、字体、边框、内边距等，以达到一致的设计风格。 6. **键盘导航** 为了提供无障碍访问，优化的下拉列表还应支持键盘导航，如使用上下...
在网页设计中，下拉列表（Dropdown List）是一种常见的用户界面元素，用于提供一组预定义的选项供用户选择。在一些交互性强的场景下，为了提高用户体验，常常需要实现下拉列表的模糊匹配功能，即用户在输入框中输入...
为了美化这个下拉列表，通常会用一个自定义的HTML结构来覆盖原生的`<select>`元素，比如使用一个按钮或一个带有标题的容器来触发下拉列表的显示。 2. **CSS样式**： `css`文件用于定义下拉列表的外观。你可以设置...
综上所述，通过结合JavaScript和CSS，我们可以对`select`下拉列表选择框进行深度美化，包括调整基本样式、添加自定义图片，甚至实现复杂的交互效果。在`select美化选择框.htm`这个示例文件中，我们可以看到一个完整...
CSS则用于美化这个组件，比如设置下拉列表的样式、隐藏和显示效果，以及输入框的样式等。我们可以利用CSS的`display`属性来控制下拉列表的可见性，使其在用户输入时显示，选择完成后隐藏。 此外，现代Web开发框架，...
1. Select元素：在HTML中，`<select>`标签用于创建一个下拉列表，用户可以从预定义的选项中进行选择。 2. 下拉菜单：下拉菜单是一种用户界面元素，用户点击一个按钮或文本后会展开一个包含多个选项的列表。 3. 美化...
pickout.js是一个效果非常炫酷的纯JavaScript下拉列表框美化插件。该下拉列表框插件大小仅5kb，在用户点击了列表框时，会弹出类似模态窗口的下拉列表，还可以对列表中的选项进行搜索过滤。本代码适用浏览器：搜狗、...
综上所述，"pickout-纯JS炫酷下拉列表框美化插件" 提供了一种增强网页下拉列表视觉效果和交互体验的方法，涉及到了JavaScript编程、HTML结构、CSS样式、动画效果等多个技术领域。对于前端开发者来说，掌握这些知识点...