<!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" />
<script language="javascript" type="text/javascript">
function show_select(input,btn,option,value){
inputobj=document.getElementById(input);
btnobj=document.getElementById(btn);
optionobj=document.getElementById(option);
valueobj=document.getElementById(value);
optionobj.style.display=optionobj.style.display==""?"none":"";
optionobj.onblur=function () {
optionobj.style.display="none";
}
for (var i=0;i<optionobj.childNodes.length;i++){
optionobj.focus();
optionobj.childNodes[i].onmouseover=function (){
this.className="qty_items_over";
}
optionobj.childNodes[i].onmouseout=function (){
this.className="qty_items_out";
}
optionobj.childNodes[i].onclick=function () {
//alert(this.innerHTML)
inputobj.innerHTML=this.innerHTML;
valueobj.value=this.innerHTML;
optionobj.blur();
optionobj.style.display="none";
if (input=="pro_color"){
loadpic(this.id,"");
}
}
}
}
</script>
<style type="text/css">
body{
font-size:12px;
}
.pro_select{
width:250px;
height:35px;}
#pro_qty{
float:left;
height:23px;
width:75px;
padding-left:2px;
border-top:1px solid #959595;
border-bottom:1px solid #959595;
border-left:1px solid #959595;
line-height:20PX;
}
#pro_qty_but{
float:left;
width:25px;
cursor:pointer;}
#qty_items{
clear:left;
width:99px;
border-right:1px solid #959595;
border-bottom:1px solid #959595;]
border-left:1px solid #959595;
position:absolute;
z-index:80;
}
.qty_items_out {
background-color:#FFFFFF;
padding-left:2px;
cursor:pointer;
line-height:18PX;
}
.qty_items_over{
background-color:#CCCCCC;
padding-left:2px;
cursor:pointer;
line-height:18PX;
}
.clear{
clear:left;}
</style>
<title>WWW.PHPERZ.COM</title>
</head>
<body >
<div class="pro_select">
<div id="pro_qty">Select Qty</div>
<div id="pro_qty_but" onclick="show_select('pro_qty','pro_qty_but','qty_items','qty')"><img src="img/select_btn.png" width="24" height="22" /></div>
<div class="clear"></div>
<div id="qty_items" style="display:none">
<div class='qty_items_out'>Select-1</div>
<div class='qty_items_out'>Select-2</div>
<div class='qty_items_out'>Select-3</div>
<div class='qty_items_out'>Select-4</div>
<div class='qty_items_out'>Select-5</div>
</div>
</div>
<form id="form1" name="form1" method="post" action="?">
<input name="qty" type="hidden" id="qty" value="1" />
</form>
</body>
</html>
分享到：
相关推荐
本文将详细介绍如何使用JS模拟Select组件，以及如何实现良好的兼容性和用户友好性。 首先，模拟Select组件的主要目标是提供一种自定义的交互方式，包括但不限于：自定义样式、动画效果、键盘导航以及与原生Select...
这种做法通常被称为“div模拟select”。本教程将深入探讨如何利用`div`实现这一功能，并提供一个实用版的示例。 `select`元素是HTML中的一个标准组件，用于创建下拉列表，用户可以通过单击下拉箭头选择一个选项。...
综上所述，使用JavaScript模拟`<select>`下拉菜单可以提供更丰富的定制性和交互性，但需要注意的是，这也会增加代码复杂性和维护成本。因此，在选择实现方式时，应根据项目需求和团队技术栈来权衡。
"解决IE6中 Div层挡不住Select组件"这个问题是一个典型的例子，它反映了IE6在CSS层叠样式和Z-index处理上的独特行为。 在现代浏览器中，我们可以利用CSS的`z-index`属性来控制元素的前后堆叠顺序，从而让某些元素...
在网页设计中，有时出于美观或者交互性的考虑，开发者会使用`div`、`JavaScript`和`CSS`来模拟原生的`select`下拉菜单。这种做法可以让设计师更好地控制样式，实现更丰富的交互效果。本文将深入探讨如何利用这三种...
总结来说，“div模拟select”是为了提高前端用户体验和界面设计自由度的一种常见实践，它结合了HTML、CSS和JavaScript的技术，使得下拉菜单能够适应各种复杂的UI需求。通过学习和掌握这种技术，开发者可以更自由地...
在Web开发中，模拟select元素的点击事件是一项常见的需求，尤其是当我们希望在不直接与页面交互的情况下改变选项值时。本文将通过实例讲解来阐述如何在使用layui框架的情况下，模拟select的点击事件。 ### 标题知识...
在网页开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理以及动画制作等任务。...本文将详细讨论如何使用...通过深入理解HTML、CSS和jQuery，你可以构建出更复杂、更符合用户体验的模拟select组件。
在网页开发中，有时出于设计或交互的需求，我们可能需要使用`div`元素来模拟`select`下拉框的功能，并实现省市联动的效果。这是一种常见的前端技术应用场景，特别是在响应式设计和自定义UI组件中。本篇文章将详细...
压缩包中的`模拟select.html`可能是包含示例代码的HTML文件，`js`可能是一个JavaScript文件，其中包含了实现模拟select的jQuery代码。`img`目录可能存放了用于样式的图片资源。 7. **实际应用**： 在实际项目中，...
【描述】"纯 DIV+CSS+JS"的仿Select下拉表单，意味着这个组件完全不依赖于任何特定的库或框架，如jQuery或React等，而是使用基础的HTML、CSS和JavaScript语法实现。这种实现方式对开发者来说，一方面降低了依赖性，...
在网页设计中，`div` 和 `css` 是两种核心的技术，用于构建和美化页面布局。`div` 是一个HTML（超文本标记语言）...在实际项目中，开发者可以根据具体需求进行调整和优化，创造出符合品牌风格的自定义`select`组件。
以上就是关于“html多选下拉框，CheckBox的Select组件”的详细解释。通过这种方式，我们可以创建一个具有多选功能的下拉菜单，同时保持良好的用户体验和可定制性。在实际开发中，根据项目需求，可以选择适合的实现...
这个技术主要是通过CSS和JavaScript（通常会结合使用jQuery或其他JS库）来创建一个看起来和行为类似于`<select>`的组件，同时能够更好地控制样式和增加自定义功能。 在兼容性方面，这个技术的目标是确保在主流...
标题提到的“兼容各种浏览器的input模拟SELECT”是一种通过JavaScript和CSS实现的解决方案，它旨在提供一种更灵活、可定制化的下拉选择体验，并确保在多种浏览器间的一致性。 这个项目可能是用JavaScript库（如...
3. 创建一个下拉列表div，列表内含有选项div，用于模拟select控件的下拉功能。 4. 使用CSS设置相应的样式，使自定义的div具有select控件的基本外观。 5. 利用JavaScript来控制下拉列表的显示和隐藏，以及如何响应...
jQuery模拟select下拉框插件就是为了克服这些局限性。它通常会用一个`<div>`或其他HTML元素来模拟下拉框，并结合JavaScript和CSS实现动态效果和定制样式。这种插件可以提供更多的定制选项，如分组、搜索、过滤、无限...
这个模拟select组件的核心功能包括： 1. 初始化：通过`init`方法获取页面上的所有select元素，并调用`initView`和`globalEvent`方法来构建模拟的select结构并绑定全局事件。 2. 全局事件处理：`globalEvent`方法...