<html>
<head>
<script>
function DivSetVisible(state)
{
var DivRef = document.getElementById('PopupDiv');
var IfrRef = document.getElementById('DivShim');
if(state)
{
DivRef.style.display = "block";
IfrRef.style.width = DivRef.offsetWidth;
IfrRef.style.height = DivRef.offsetHeight;
IfrRef.style.top = DivRef.style.top;
IfrRef.style.left = DivRef.style.left;
IfrRef.style.zIndex = DivRef.style.zIndex - 1;
IfrRef.style.display = "block";
}
else
{
DivRef.style.display = "none";
IfrRef.style.display = "none";
}
}
</script>
</head>
<body>
<form>
<select>
<option>A Select Box is Born ....</option>
</select>
</form>
<div id="PopupDiv" style="position:absolute; top:25px; left:50px; padding:4px; display:none; background-color:#000000; color:#ffffff; z-index:100">
.... and a DIV can cover it up<br/>through the help of an IFRAME.
<script>
for(var i=0;i<10;i++){
document.write("kkkk<br>");
}
</script>
</div>
<select>
<option>A 333 Box is Born ....</option>
</select>
<iframe id="DivShim" src="javascript:false;" scrolling="no" frameborder="0" style="position:absolute; top:0px; left:0px; display:none;">
</iframe>
<br/>
<br/>
<a href="#" onClick="DivSetVisible(true)">Click to show DIV.</a>
<br/>
<br/>
<a href="#" onClick="DivSetVisible(false)">Click to hide DIV.</a>
<table>
<tr><td>
<select style="width:120px " disabled>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<input type="text" name="name1" style="width:100px "/>
</td>
<td>
<select name="name2_tem" style="width:120px " onChange="changeSelect(this)" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="text" name="name2" style="width:104px; position:relative; left:-130px;border-right:0 "/>
</td>
</tr>
</table>
</body>
<script>
function changeSelect(obj){
document.getElementsByName("name2")[0].value=obj.value;
//selectedIndex.text
}
</script>
</html>
分享到:
相关推荐
`div模拟select自定义下拉列表框`是一种常见做法,它利用JavaScript(如jQuery)和CSS来实现,可以提供比原生`<select>`元素更丰富的样式控制和交互体验。本篇将详细介绍这种技术及其应用。 一、为什么使用div模拟...
为了解决这个问题,开发者常常使用`div`元素配合CSS和JavaScript来模拟下拉菜单,以实现更加灵活和美观的效果。在这个"div模拟下拉菜单(select)jquery插件.gz"压缩包中,包含的就是这样一个基于`div`和jQuery的...
JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 ...
本教程将详细讲解如何使用 `jQuery` 实现一个具有模糊搜索功能的下拉选择框,以提升用户在交互时的体验。 首先,我们需要了解 `select` 元素在HTML中的基本用法。`<select>` 标签用于创建一个下拉列表,用户可以...
本篇将深入探讨如何利用`div`元素来实现`select`下拉菜单的美化效果,以及相关的前端技术知识。 一、为什么使用`div`模拟`select`? 1. 自定义样式:`<select>`元素默认的样式在不同浏览器间存在差异,而使用`div`...
<div id="selectcontent" class="selectdiv" style="visibility:hidden;"> <iframe id="selframe" frameborder="0" height="100%"></iframe> <div id="selecthtml" class="selectcontent">selectÁÐ</...
js实现的可下拉可输入input框 会自动检测输入的值在select中寻找对应选项
Bootstrap Select是一款基于Bootstrap框架的下拉菜单插件,它扩展了HTML5的选择元素,提供了更加丰富和可定制的下拉菜单功能,尤其适用于那些需要多选或者有复杂样式的下拉选项的情况。这个插件是用jQuery构建的,...
下拉复选框通常由HTML的`<select>`元素与`<option>`子元素配合使用,而为了实现更丰富的交互效果,我们可能还会涉及到JavaScript(js)和CSS(css)的运用。在这个项目中,包含的`TestPublicUserManageNew.html`是主...
在本主题中,我们将探讨如何使用CSS实现三种不同的下拉选择框(select)风格:苹果风格、描边风格和凹凸风格。 1. 苹果风格的下拉选择框: 苹果风格的下拉选择框通常以其简洁、优雅的设计而著称。要实现这一风格,...
select ——使用DIV 实现 Select js源码
jQuery div仿select下拉选项菜单美化获取html jQuery div仿select下拉选项菜单美化获取html jQuery div仿select下拉选项菜单美化获取html jQuery div仿select下拉选项菜单美化获取html
在IT领域,尤其是在前端开发中,"SelectBox下拉复选框多选插件"是一种常用的用户界面元素,用于提供用户友好的多选项选择功能。它结合了传统的下拉列表和复选框的特性,使得在有限的空间内,用户能够方便地筛选和...
在本项目中,“美漂亮的实用div+css模仿select下拉控件”是一个使用JavaScript(jq,即jQuery库)实现的,旨在提供一种更美观、用户体验更好的下拉选择功能。接下来,我们将详细探讨这个项目中的关键知识点。 1. **...
在网页开发中,"select下拉带模糊搜索功能"是一个常见的需求,特别是在用户需要从大量选项中快速选择某一特定项时。这个功能提高了用户体验,使查找和选择变得更加便捷。本项目通过HTML、JavaScript(可能包括jQuery...
在这种情况下,“selectbox Js实现的下拉复选框”是一个很好的解决方案,它将复选框的功能与下拉菜单相结合,既节省了空间,又保持了功能的完整。 一、JavaScript基础 JavaScript是一种广泛使用的客户端脚本语言,...
5. **事件处理**:插件提供了多种事件,如`changed.bs.select`、`shown.bs.select`等,可以根据需要监听这些事件来执行相应的回调函数。 6. **API调用**:Bootstrap Select还提供了一些API方法,如`selectpicker('...
在网页设计中,有时我们可能需要使用自定义的下拉列表来替代HTML原生的`<select>`元素,以实现更复杂或者更具设计感的交互效果。这就是"div 模拟下拉列表"的主要应用场景。这个技术主要是通过CSS和JavaScript(通常...
在网页设计中,`<select>`元素通常用于创建下拉列表,它允许用户从一组预定义的选项中进行选择。然而,传统的`<select>`标签并不支持直接在选项中显示图片,只支持纯文本内容。但随着现代Web技术的发展,我们可以...
本篇文章将详细讲解如何使用`div`模拟`select`框,以及如何实现省市联动的二级和三级菜单。 首先,我们要理解`select`元素的基本用法。`select`是HTML中的一个表单元素,用于创建下拉选项列表。然而,由于`select`...