<!doctype html>
<html>
<head><meta charset="gb2312">
<title></title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<style>
.styledSelect{ position:relative; margin:0 100px 0 0; padding:0; float:left; width:113px; line-height:21px; border:1px solid #000; background:url(selete.png) repeat-x;}
.styledSelect select{ margin:0; padding:0; visibility:hidden; border:none; width:1px; height:1px;}
.styledSelect ul{ margin:0; padding:0; width:113px; list-style:none; border-top:none; display:none;}
li.liClass{ cursor:pointer; padding-left:5px; list-style:none; font-family:'宋体'; font-size:12px; height:21px; line-height:21px;}
.divClass{ cursor:pointer; width:108px; height:21px; padding-left:5px; background:url(selete_bg.png) no-repeat right top;}
.liHover{ background:#E1E1E1!important;}
.liSelected{ background:#AEAEAE;}
</style>
</head>
<body>
<div class="styledSelect">
<select id="brand" name="brand">
<option value="0">选择品牌</option>
<option value="1">Cisio</option>
<option value="2">太平鸟</option>
<option value="3">比起</option>
</select>
</div>
<div class="styledSelect">
<select id="sort" name="sort">
<option value="0">选择品类</option>
<option value="1">男装</option>
<option value="2">女装</option>
</select>
</div>
</body>
</script>
<script>
<html>
<head><meta charset="gb2312">
<title></title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<style>
.styledSelect{ position:relative; margin:0 100px 0 0; padding:0; float:left; width:113px; line-height:21px; border:1px solid #000; background:url(selete.png) repeat-x;}
.styledSelect select{ margin:0; padding:0; visibility:hidden; border:none; width:1px; height:1px;}
.styledSelect ul{ margin:0; padding:0; width:113px; list-style:none; border-top:none; display:none;}
li.liClass{ cursor:pointer; padding-left:5px; list-style:none; font-family:'宋体'; font-size:12px; height:21px; line-height:21px;}
.divClass{ cursor:pointer; width:108px; height:21px; padding-left:5px; background:url(selete_bg.png) no-repeat right top;}
.liHover{ background:#E1E1E1!important;}
.liSelected{ background:#AEAEAE;}
</style>
</head>
<body>
<div class="styledSelect">
<select id="brand" name="brand">
<option value="0">选择品牌</option>
<option value="1">Cisio</option>
<option value="2">太平鸟</option>
<option value="3">比起</option>
</select>
</div>
<div class="styledSelect">
<select id="sort" name="sort">
<option value="0">选择品类</option>
<option value="1">男装</option>
<option value="2">女装</option>
</select>
</div>
</body>
</script>
<script>
// ie6,ie7,ie8,ff,opera中测试可用
//made by keimon
// 设置元素样式
function setStyle(elem,prop){
for(var i in prop){
elem.style[i] = prop[i];
}
}
//模拟下拉框，select；
function selectModel(brand){
var parentDiv = brand.get(0).parentNode;
var selectId = brand.attr('id');
var ul = document.createElement('ul');
$(ul).attr('id',('ul'+selectId));
parentDiv.appendChild(ul);
var optionLen = brand.find('option').length;
for(var i=0; i<optionLen; i++){
var li = document.createElement('li') ;
ul.appendChild(li);
$(li).addClass('liClass');
$(li).html(brand.find('option').get(i).text)
}
var div1 = document.createElement('div');
$(div1).attr('id',('div'+selectId));
$(div1).html(brand.find('option').get(0).text);
divStyle={
fontSize: '12px',
position: 'absolute',
left: '0px',
top: '0px'
};
parentDiv.appendChild(div1);
setStyle(div1, divStyle);
$(div1).addClass('divClass');
$('body').click(function(event){
var target = event.target;
var targetName = target.nodeName;
if(event.target.id== $(div1).attr('id')){
for(var i=0; i<optionLen; i++){
if($(ul).find('li').eq(i).html()==$(div1).html()){
$(ul).find('li').removeClass('liSelected').eq(i).addClass('liSelected');
}
}
$(ul).css('display','block');
}else if(event.target.parentNode.id.toLowerCase()=='ul'+selectId){
if(event.target.nodeName== 'LI'){
$(div1).html(event.target.innerHTML)
}
$(ul).css('display','none');
}
})
$(ul).find('li').mouseenter(function(){
$(ul).find('li').removeClass('liHover');
$(this).addClass('liHover');
})
}
//实例化
var brand = $('#brand');
selectModel(brand);
var sort1 = $('#sort');
selectModel(sort1);
</script>
</html>
function setStyle(elem,prop){
for(var i in prop){
elem.style[i] = prop[i];
}
}
//模拟下拉框，select；
function selectModel(brand){
var parentDiv = brand.get(0).parentNode;
var selectId = brand.attr('id');
var ul = document.createElement('ul');
$(ul).attr('id',('ul'+selectId));
parentDiv.appendChild(ul);
var optionLen = brand.find('option').length;
for(var i=0; i<optionLen; i++){
var li = document.createElement('li') ;
ul.appendChild(li);
$(li).addClass('liClass');
$(li).html(brand.find('option').get(i).text)
}
var div1 = document.createElement('div');
$(div1).attr('id',('div'+selectId));
$(div1).html(brand.find('option').get(0).text);
divStyle={
fontSize: '12px',
position: 'absolute',
left: '0px',
top: '0px'
};
parentDiv.appendChild(div1);
setStyle(div1, divStyle);
$(div1).addClass('divClass');
$('body').click(function(event){
var target = event.target;
var targetName = target.nodeName;
if(event.target.id== $(div1).attr('id')){
for(var i=0; i<optionLen; i++){
if($(ul).find('li').eq(i).html()==$(div1).html()){
$(ul).find('li').removeClass('liSelected').eq(i).addClass('liSelected');
}
}
$(ul).css('display','block');
}else if(event.target.parentNode.id.toLowerCase()=='ul'+selectId){
if(event.target.nodeName== 'LI'){
$(div1).html(event.target.innerHTML)
}
$(ul).css('display','none');
}
})
$(ul).find('li').mouseenter(function(){
$(ul).find('li').removeClass('liHover');
$(this).addClass('liHover');
})
}
//实例化
var brand = $('#brand');
selectModel(brand);
var sort1 = $('#sort');
selectModel(sort1);
</script>
</html>
相关推荐
模拟下拉框select，之前穿过一个，是纯div和li写的，现在这个的本质还是select，虽然没有经过实验，不过应该不用怕开发的时候取不到值这个问题，修改起来也很简单，只要有点css基础的都应该没有问题~
`jQuery手机下拉框select` 主要关注于改善移动端的用户体验，通过JavaScript和CSS增强下拉框的外观和功能。 ### jQuery Mobile Select Menu jQuery Mobile 提供了一个专门的 Select Menu 插件，用于将标准的...
文件名为"DIV模拟select1"可能是一个示例项目或代码文件，用于演示如何使用jQuery和CSS创建这样一个模拟下拉框。在实际操作中，通常会包含HTML结构、CSS样式表和JavaScript脚本。HTML部分可能包含一个父级元素作为...
3. **模拟下拉框**：这个项目通过CSS样式和JavaScript逻辑，使用`<div>`元素替代`<select>`元素，创建出一个可定制的下拉选择框。`<div>`元素可以更自由地设置样式，提供更好的视觉效果。 4. **单选与多选**：在...
原生js text文本框模拟select下拉框美化点击下拉菜单选 原生js text文本框模拟select下拉框美化点击下拉菜单选 原生js text文本框模拟select下拉框美化点击下拉菜单选 原生js text文本框模拟select下拉框美化点击...
在网页设计中，"div模拟下拉框"是一种常见的技术，用于替代HTML原生的`<select>`元素，以提供更灵活的样式控制和交互体验。`<select>`标签虽然简单易用，但在某些场景下可能无法满足设计师的个性化需求，如自定义...
在HTML结构中，我们可以用一个普通的`<select>`元素作为基础，然后通过jQuery选择器找到这个元素，调用插件的方法将其转换为我们需要的模拟下拉框。例如： ```html <select id="customSelect"> 选项1 选项2 选项...
这种模拟下拉框可以提供更灵活的设计和交互体验。 首先，原生的 HTML 下拉框虽然简单易用，但在某些情况下可能无法满足设计师和开发者的需求，例如自定义样式、多级联动、异步加载选项等。jQuery 提供的解决方案...
- **自动触发下拉**: 通过JavaScript代码模拟用户操作，触发select的下拉框。 - **选择特定选项**: 自动点击下拉框中的特定选项。 #### 示例代码 - 使用jQuery选择器和`click()`方法来模拟用户点击操作，实现自动...
**JS模拟Select下拉框组件详解** 在网页开发中，Select元素是常用的数据选择控件，但其样式和交互方式往往不能满足设计师和开发者对于用户体验的高要求。为了解决这个问题，开发人员通常会使用JavaScript来模拟...
CSS在模拟下拉框的过程中扮演了关键角色。我们可以通过CSS定义下拉按钮的样式，包括背景色、边框、字体等，同时也可以为显示的选项列表设置样式，如宽度、高度、过渡效果等。例如： ```css .custom-select { ...
- 解析返回的JSON或XML数据，根据数据结构动态创建新的`<option>`元素，插入到对应的模拟下拉框中。 - 使用`append()`、`html()`等jQuery方法更新DOM结构。 5. **CSS样式定制**： 为了使模拟的下拉框与原生的`...
divcss模拟select 下拉框 select 改变样式
使用div模拟下拉框则可以自由调整外观，包括字体、颜色、边框、阴影等，并能实现更丰富的动画效果。 在Demo中，通常会有一个主div作为下拉框的容器，点击时显示或隐藏下拉选项列表。这个列表也是由div组成的，每个...
它通常会用一个`<div>`或其他HTML元素来模拟下拉框，并结合JavaScript和CSS实现动态效果和定制样式。这种插件可以提供更多的定制选项，如分组、搜索、过滤、无限滚动等功能，使得用户体验更加友好。 对于多选功能，...
本资源“jQuery模拟select下拉框多选和单选插件.zip”提供了一种利用jQuery实现模拟下拉框选择功能的方法，特别适合在网页中创建具有多选和单选功能的下拉菜单，而无需使用原生的`<select>`元素。这样的插件对于提升...
本示例中，"JQ JS javascript layui UI框架 带搜索下拉框 select" 是一个基于jQuery和layui的特定功能实现，即在layui的UI设计中创建了一个具有搜索功能的下拉选择框。这个功能在许多网页应用中都很常见，例如在表单...
【标题】"模拟select下拉框插件SelectBox"是一个专为网页设计开发的JavaScript插件，主要用于替换原生HTML的`<select>`元素，提供更丰富的交互效果和自定义功能。这种插件通常用于提升用户体验，使得下拉选择框在...
然而，原生的HTML Select元素在样式控制和交互效果上存在局限性，这使得开发者经常寻求JavaScript（JS）解决方案来模拟下拉框控件，以实现更丰富的视觉效果和用户体验。本压缩包中的内容就是一种利用JS来模拟下拉框...
使用jQuery模拟`<select>`效果，我们可以创建一个无序列表`<ul>`，然后用`<li>`元素作为可选的项目。这样可以自由定制样式，甚至添加复杂的交互效果。以下是一个基本的HTML结构示例： ```html ;"> ...