<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS+DIV模拟SELECT并且把无效选项设置为灰色</title>
<script type="text/javascript">
$=function(id){
return document.getElementById(id);
}
var flag=false;
function shlist(){
$("selectList").style.display=$("selectList").style.display=="block"?"none":"block";
}
function changesever(ts){
document.getElementById("t_selected").innerHTML="---"+ts.innerHTML+"---";
shlist();
}
function setFlag(val){
flag=val;
}
function hideList(){
if(!flag)document.getElementById("selectList").style.display="none";
}
setCss=function(p){
p.style.cursor='hand';
p.style.backgroundColor='#BABABA';
}
removeCss=function(p){
p.style.backgroundColor='white';
}
</script>
<style type="text/css">
#contain{ width:200px; height:18px; }
#t_selected{
background-image:url(http://bbs.17gb.com/images/default/arrow_down.gif) !important;
background-position:100% 50% !important;
background-repeat:no-repeat !important;
font-size:12px;
border:#DFDFDF 1px solid;
}
#selectList{border:#DFDFDF 1px solid; font-size:12px; width:200px;text-align:left; display:none;}
#selectList span{width:200px}
</style>
</head>
<body>
<div id="contain">
<div id="t_selected" onclick="shlist();" onmouseover="setFlag(true);" onmouseout="setFlag(false);" onblur="hideList()">---请选---</div>
<div id="selectList" onmouseover="setFlag(true);" onmouseout="setFlag(false);">
<span onclick="changesever(this);" onmouseover="setCss(this)" onmouseout="removeCss(this);">餐饮美食</span><br/>
<span onclick="changesever(this);" onmouseover="setCss(this)" onmouseout="removeCss(this);">休闲娱乐</span><br/>
<span style='color:rgb(136, 136, 136)'>宾馆酒店</span><br/>
<span onclick="changesever(this);" onmouseover="setCss(this)" onmouseout="removeCss(this);">购物指南</span><br/>
<span onclick="changesever(this);" onmouseover="setCss(this)" onmouseout="removeCss(this);">运动场馆</span><br/>
<span onclick="changesever(this);" onmouseover="setCss(this)" onmouseout="removeCss(this);">生活便利</span><br/>
<span onclick="changesever(this);" onmouseover="setCss(this)" onmouseout="removeCss(this);">出行旅游</span><br/>
</div>
</div>
</body>
分享到：
相关推荐
一、为什么使用div+css模拟select？ 1. **样式可控**：使用HTML `div`元素，可以自由地应用CSS样式，实现自定义背景、边框、字体等，以匹配网站的整体设计风格。 2. **交互性增强**：通过JavaScript或jQuery等库，...
在网页设计中，"DIV + CSS + JAVASCRIPT + 模仿 HTML中select"是一个常见的技术实践，目的是为了在不使用HTML原生`<select>`元素的情况下，通过JavaScript和CSS来创建具有相同功能和交互体验的下拉选择器。...
然后，我们将在`div`内嵌套一个`<select>`元素，并将其`position`设置为`absolute`，这样可以使其脱离正常文档流并定位在`div`的特定位置。 接下来，我们需要用CSS来定制`select`的外观。由于`select`元素在不同...
【标题】"DIV+CSS+JS仿Select下拉表单"是前端开发中常见的一个技术实践，它旨在通过HTML的`<div>`元素、CSS样式和JavaScript脚本，实现一个功能与原生`<select>`标签类似的下拉选择器。这种自定义下拉表单在界面设计...
divcss模拟select 下拉框 select 改变样式
jquery+css+div 实现的模拟select多选 jquery+css+div 实现的模拟select多选
总的来说，通过JS和CSS的结合，我们可以将原本朴素的Select选项框转变为符合现代审美和交互需求的组件。这个过程涉及HTML结构的调整、CSS样式的定义以及JavaScript的交互实现，最终目的是提供一个既美观又易用的下拉...
在本项目中，“美漂亮的实用div+css模仿select下拉控件”是一个使用JavaScript（jq，即jQuery库）实现的，旨在提供一种更美观、用户体验更好的下拉选择功能。接下来，我们将详细探讨这个项目中的关键知识点。 1. **...
在本项目中，`div`被用作构建下拉框的结构，通过CSS来设置样式，包括颜色、字体、边框、阴影等，从而实现精美的视觉效果。CSS还负责控制元素的定位和浮动，使得下拉框能正确地与其它元素对齐并响应用户的操作。 4. ...
- `select2css.js`可能是用于处理模拟Select的JavaScript代码，可能包含了点击事件监听、显示/隐藏下拉选项、选中项更新等功能。 - 例如，当用户点击模拟的Select时，可以显示一个由`div`元素构建的下拉菜单，并...
文件名为"DIV模拟select1"可能是一个示例项目或代码文件，用于演示如何使用jQuery和CSS创建这样一个模拟下拉框。在实际操作中，通常会包含HTML结构、CSS样式表和JavaScript脚本。HTML部分可能包含一个父级<div>元素...
在网页设计中，有时出于美观或者交互性的考虑，开发者会使用`div`元素来模拟`select`下拉菜单的效果。这种做法通常被称为“div模拟select”。本教程将深入探讨如何利用`div`实现这一功能，并提供一个实用版的示例。 ...
为了解决这个问题，开发者常常使用`div`元素配合CSS和JavaScript来模拟下拉菜单，以实现更加灵活和美观的效果。在这个"div模拟下拉菜单(select)jquery插件.gz"压缩包中，包含的就是这样一个基于`div`和jQuery的...
标题“用div+jq高仿ie6的select表单随内容增加”所涉及的技术点是使用HTML `div` 元素和jQuery库来模拟原生的`select`下拉列表，并且这个模拟的效果能够根据内容的增加自动调整大小，以保持良好的用户体验。...
`div模拟select自定义下拉列表框`是一种常见做法，它利用JavaScript（如jQuery）和CSS来实现，可以提供比原生`<select>`元素更丰富的样式控制和交互体验。本篇将详细介绍这种技术及其应用。 一、为什么使用div模拟...
此form select下拉控件是使用div+jq+css实现，其表单功能正常使用，能正常传值。根据需要修改css背景、css宽度、css高度等图片或css样式实现自己想要的select下拉菜单表单美化效果。演示地址：...
根据给定文件的信息，本文将围绕“js+div+css弹出层”的实现方法进行详细介绍。弹出层在网页设计中十分常见，主要用于提供额外的信息展示或者操作界面，如登录框、注册框、提示信息等。 ### 一、基本概念 #### 1.1...
使用JavaScript（通常配合CSS）模拟`<select>`，我们可以创建更灵活的组件。以下是一个基本的实现步骤： #### (1) HTML结构 首先，我们需要创建一个具有模拟下拉菜单所需元素的容器，例如： ```html <div class=...