`
anson_xu
  • 浏览: 513241 次
  • 性别: Icon_minigender_1
  • 来自: 惠州
社区版块
存档分类

处理select框盖住div问题和可输下拉单实现

阅读更多

<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自定义下拉列表框(jQuery)

    `div模拟select自定义下拉列表框`是一种常见做法,它利用JavaScript(如jQuery)和CSS来实现,可以提供比原生`&lt;select&gt;`元素更丰富的样式控制和交互体验。本篇将详细介绍这种技术及其应用。 一、为什么使用div模拟...

    div模拟下拉菜单(select)jquery插件.gz

    为了解决这个问题,开发者常常使用`div`元素配合CSS和JavaScript来模拟下拉菜单,以实现更加灵活和美观的效果。在这个"div模拟下拉菜单(select)jquery插件.gz"压缩包中,包含的就是这样一个基于`div`和jQuery的...

    JavaScript 事件处理 下拉列表和可选项 示例代码

    JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 ...

    jquery实现select带模糊搜索下拉选择框

    本教程将详细讲解如何使用 `jQuery` 实现一个具有模糊搜索功能的下拉选择框,以提升用户在交互时的体验。 首先,我们需要了解 `select` 元素在HTML中的基本用法。`&lt;select&gt;` 标签用于创建一个下拉列表,用户可以...

    div模拟select下拉菜单美化效果

    本篇将深入探讨如何利用`div`元素来实现`select`下拉菜单的美化效果,以及相关的前端技术知识。 一、为什么使用`div`模拟`select`? 1. 自定义样式:`&lt;select&gt;`元素默认的样式在不同浏览器间存在差异,而使用`div`...

    实现select下拉选项可编辑

    &lt;div id="selectcontent" class="selectdiv" style="visibility:hidden;"&gt; &lt;iframe id="selframe" frameborder="0" height="100%"&gt;&lt;/iframe&gt; &lt;div id="selecthtml" class="selectcontent"&gt;select&Aacute;&ETH;&lt;/...

    js实现可下拉可输入input select框

    js实现的可下拉可输入input框 会自动检测输入的值在select中寻找对应选项

    bootstrap-select下拉复选框.rar

    Bootstrap Select是一款基于Bootstrap框架的下拉菜单插件,它扩展了HTML5的选择元素,提供了更加丰富和可定制的下拉菜单功能,尤其适用于那些需要多选或者有复杂样式的下拉选项的情况。这个插件是用jQuery构建的,...

    jsp/html 实现下拉复选框

    下拉复选框通常由HTML的`&lt;select&gt;`元素与`&lt;option&gt;`子元素配合使用,而为了实现更丰富的交互效果,我们可能还会涉及到JavaScript(js)和CSS(css)的运用。在这个项目中,包含的`TestPublicUserManageNew.html`是主...

    css实现个性化select 下拉选择框(3种风格)

    在本主题中,我们将探讨如何使用CSS实现三种不同的下拉选择框(select)风格:苹果风格、描边风格和凹凸风格。 1. 苹果风格的下拉选择框: 苹果风格的下拉选择框通常以其简洁、优雅的设计而著称。要实现这一风格,...

    select ——使用DIV 实现 Select

    select ——使用DIV 实现 Select js源码

    jQuery div仿select下拉选项菜单美化获取html

    jQuery div仿select下拉选项菜单美化获取html jQuery div仿select下拉选项菜单美化获取html jQuery div仿select下拉选项菜单美化获取html jQuery div仿select下拉选项菜单美化获取html

    SelectBox下拉复选框多选插件

    在IT领域,尤其是在前端开发中,"SelectBox下拉复选框多选插件"是一种常用的用户界面元素,用于提供用户友好的多选项选择功能。它结合了传统的下拉列表和复选框的特性,使得在有限的空间内,用户能够方便地筛选和...

    美漂亮的实用div+css模仿select下拉控件

    在本项目中,“美漂亮的实用div+css模仿select下拉控件”是一个使用JavaScript(jq,即jQuery库)实现的,旨在提供一种更美观、用户体验更好的下拉选择功能。接下来,我们将详细探讨这个项目中的关键知识点。 1. **...

    select下拉带模糊搜索功能

    在网页开发中,"select下拉带模糊搜索功能"是一个常见的需求,特别是在用户需要从大量选项中快速选择某一特定项时。这个功能提高了用户体验,使查找和选择变得更加便捷。本项目通过HTML、JavaScript(可能包括jQuery...

    selectbox Js实现的下拉复选框

    在这种情况下,“selectbox Js实现的下拉复选框”是一个很好的解决方案,它将复选框的功能与下拉菜单相结合,既节省了空间,又保持了功能的完整。 一、JavaScript基础 JavaScript是一种广泛使用的客户端脚本语言,...

    bootstrap-select下拉选择搜索框,可以多选和单选

    5. **事件处理**:插件提供了多种事件,如`changed.bs.select`、`shown.bs.select`等,可以根据需要监听这些事件来执行相应的回调函数。 6. **API调用**:Bootstrap Select还提供了一些API方法,如`selectpicker('...

    div 模拟下拉列表

    在网页设计中,有时我们可能需要使用自定义的下拉列表来替代HTML原生的`&lt;select&gt;`元素,以实现更复杂或者更具设计感的交互效果。这就是"div 模拟下拉列表"的主要应用场景。这个技术主要是通过CSS和JavaScript(通常...

    select下拉列表显示图片内容

    在网页设计中,`&lt;select&gt;`元素通常用于创建下拉列表,它允许用户从一组预定义的选项中进行选择。然而,传统的`&lt;select&gt;`标签并不支持直接在选项中显示图片,只支持纯文本内容。但随着现代Web技术的发展,我们可以...

    div模拟select框的实现省市联动三级和二级

    本篇文章将详细讲解如何使用`div`模拟`select`框,以及如何实现省市联动的二级和三级菜单。 首先,我们要理解`select`元素的基本用法。`select`是HTML中的一个表单元素,用于创建下拉选项列表。然而,由于`select`...

Global site tag (gtag.js) - Google Analytics