没有办法，平时不是万不得已我是不喜欢去模拟各类控件的，一个是麻烦，二个是对性能也有些影响，还是原生的来的实在。老板昨天发话，必须模拟赶紧的，老外最喜欢简洁干净的风格，说的貌似都很在理的样子，业务部也是一样，都是一些不懂产品的人来提需求哈哈，不说啦。功能也不难就是多耗了我一点点时间，本来是不用做的，任务早就做完了。为了满足老板提的需求我还是改了，尊重她的选择，毕竟人家是老板，这叫“做事不依东，累死都无功”，在读我文章的朋友们你要牢记了。下面直接看我代码。我昨天测试了的：IE6——IE9，火狐，谷歌都木有问题，放心的用吧。如果发现那里有问题还请亲给我留言哦。
先看下效果图：
类似的方法：（http://bbs.blueidea.com/thread-3043426-1-1.html）
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.mod_select{position:absolute;left:30%;top:100px;font-familY:Arial, Helvetica, sans-serif;}
.mod_select ul{margin:0;padding:0;}
.mod_select ul li{list-style-type:none;float:left;margin-left:20px;height:24px;}
.select_label{color:#982F4D;float:left;line-height:24px;padding-right:10px;font-size:12px;font-weight:700;}
.select_box{float:left;border:solid 1px #EDE7D6;color:#444;position:relative;cursor:pointer;width:165px;background:url(../select_bg.jpg) repeat-x;font-size:12px;}
.selet_open{display:inline-block;border-left:solid 1px #E5E5E5;position:absolute;right:0;top:0;width:30px;height:24px;background:url(../select_up.jpg) no-repeat center center;}
.select_txt{display:inline-block;padding-left:10px;width:135px;line-height:24px;height:24px;cursor:text;overflow:hidden;}
.option{width:165px;;border:solid 1px #EDE7D6;position:absolute;top:24px;left:-1px;z-index:2;overflow:hidden;display:none;}
.option a{display:block;height:26px;line-height:26px;text-align:left;padding:0 10px;width:100%;background:#fff;}
.option a:hover{background:#FDE0E5;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".select_box").click(function(event){
event.stopPropagation();
$(this).find(".option").toggle();
$(this).parent().siblings().find(".option").hide();
});
$(document).click(function(event){
var eo=$(event.target);
if($(".select_box").is(":visible") && eo.attr("class")!="option" && !eo.parent(".option").length)
$('.option').hide();
});
/*赋值给文本框*/
$(".option a").click(function(){
var value=$(this).text();
$(this).parent().siblings(".select_txt").text(value);
$("#select_value").val(value)
})
})
</script>
</head>
<body>
<div class="mod_select">
<ul>
<li>
<span class="select_label">sort buy:</span>
<div class="select_box">
<span class="select_txt"></span><a class="selet_open"><b></b></a>
<div class="option">
<a>1</a>
<a>2</a>
<a>3</a>
</div>
</div>
<br clear="all" />
</li>
<li>
<span class="select_label">View:</span>
<div class="select_box">
<span class="select_txt"></span><a class="selet_open"></a>
<div class="option">
<a>1</a>
<a>2</a>
<a>3</a>
</div>
</div>
</li>
</ul>
<input type="hidden" id="select_value" />
</div>
</body>
</html>
本文为原创内容，转载请注明出处：www.dayday28.com/mod_select
分享到：
相关推荐
3. 兼容性考虑：某些老旧的浏览器可能对`<select>`元素的样式支持不完全，而`div`可以避免这些问题。 二、实现原理 1. 结构布局：创建一个包含选项的`div`容器，每个选项是一个独立的`div`元素。可以通过CSS设置`...
在网页设计中，为了提供更好的用户体验和更符合品牌风格的界面，开发者经常会选择用`div`元素来模拟`select`下拉菜单的样式。`select`元素是HTML中内置的表单控件，用于创建下拉列表，但其样式控制有限，难以实现...
为了突破这些限制，开发者经常使用`div`和`css`来模拟`select`下拉菜单，以实现更丰富的视觉效果和交互体验。这种技术被称为“div+css模拟select”。 一、为什么使用div+css模拟select？ 1. **样式可控**：使用...
总的来说，div模拟下拉列表是一种通过HTML、CSS和JavaScript实现的自定义控件，它提供了更大的设计自由度和交互灵活性，同时也需要开发者具备良好的前端技术基础和浏览器兼容性处理能力。在项目中，根据需求选择合适...
总结来说，“div模拟select”是为了提高前端用户体验和界面设计自由度的一种常见实践，它结合了HTML、CSS和JavaScript的技术，使得下拉菜单能够适应各种复杂的UI需求。通过学习和掌握这种技术，开发者可以更自由地...
在网页设计中，"select下拉菜单美化"是一个常见的需求，尤其在现代用户界面(UI)设计中，美观和用户体验是至关重要的元素。Select下拉菜单是网页表单中用于选择预设选项的一种交互控件，但原生的HTML select元素在...
由于原生`<select>`元素的限制，开发者可以创建自定义的下拉组件，例如使用`<div>`元素模拟下拉列表。这样可以自由地在每个选项中添加图片和文字。使用JavaScript和CSS进行事件监听和样式控制，可以实现与原生下拉...
2. CSS 文件：定义模拟SELECT的样式，包括`<input>`的外观、下拉菜单的布局、选中项的样式等。 3. JavaScript 文件：处理用户交互，如点击事件、选项高亮、收展下拉菜单等，以及可能的选项过滤和分页功能。 4. 图标...
在网页开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理以及Ajax交互。...通过查看这些文件，你可以更好地理解并应用上述步骤，从而在自己的项目中实现jQuery自定义select下拉菜单。
- 例如，当用户点击模拟的Select时，可以显示一个由`div`元素构建的下拉菜单，并根据用户的鼠标选择来改变选中的选项。 4. **响应式设计**：考虑到不同的设备和屏幕尺寸，可能还需要使用媒体查询(`@media`)来确保...
【标题】"DIV+CSS+JS仿Select下拉表单"是前端开发中常见的一个技术实践，它旨在通过HTML的`<div>`元素、CSS样式和JavaScript脚本，实现一个功能与原生`<select>`标签类似的下拉选择器。这种自定义下拉表单在界面设计...
在现代网页设计中，select下拉列表是实现用户交互的一项基本元素，但在不同的浏览器中，其样式表现差异较大，且在自定义样式方面存在限制，尤其是无法完全通过CSS控制其外观。随着Web标准的推进，浏览器厂商对HTML...
在模拟Select下拉选择框时，我们通常会用到以下jQuery方法： 1. `addClass()` 和 `removeClass()`：用来添加或移除CSS类，从而改变元素的样式，实现下拉效果。 2. `toggle()`：用于切换元素的可见性，模拟点击显示/...
在网页开发中，"select下拉带模糊搜索功能"是一个常见的需求，特别是在用户需要从大量选项中快速选择某一特定项时。这个功能提高了用户体验，使查找和选择变得更加便捷。本项目通过HTML、JavaScript（可能包括jQuery...
3. **模拟下拉框**：这个项目通过CSS样式和JavaScript逻辑，使用`<div>`元素替代`<select>`元素，创建出一个可定制的下拉选择框。`<div>`元素可以更自由地设置样式，提供更好的视觉效果。 4. **单选与多选**：在...
这包括确保菜单在不同设备和浏览器上的兼容性，以及处理大量选项时的性能问题。同时，良好的代码组织和模块化设计也有助于维护和扩展功能。 总的来说，携程的下拉菜单支持过程js是网页前端开发中的一个经典应用，它...
总结来说，使用jQuery模拟select实现下拉菜单功能是一种常见的前端开发技巧，它可以提供更好的视觉效果和交互体验，同时允许开发者灵活地定制样式和行为。结合CSS3动画，这种模拟方法能创造出更加生动和吸引人的用户...
在网页设计中，有时出于美观或者交互性的考虑，开发者会使用`div`、`JavaScript`和`CSS`来模拟原生的`select`下拉菜单。这种做法可以让设计师更好地控制样式，实现更丰富的交互效果。本文将深入探讨如何利用这三种...
这个实现方法虽然可以有效地改变`select`下拉菜单的外观，但需要注意的是，这种方法可能在某些旧版浏览器或移动设备上存在兼容性问题。在实际项目中，可能需要结合使用如jQuery UI Selectmenu、Select2 或 Chosen 等...