<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+css打造select下拉菜单,可自己修改相应样式!!!
jQuery+div+css模拟select自定义下拉列表框，简单轻巧实用。
一个带下拉模糊搜索的select，替换下拉内容后即可直接使用，只需要把对应文件放到指定文件夹中引用即可
select ——使用DIV 实现 Select js源码
实现select下拉选项可编辑
js实现的可下拉可输入input框 会自动检测输入的值在select中寻找对应选项
jQuery div仿select下拉选项菜单美化获取html jQuery div仿select下拉选项菜单美化获取html jQuery div仿select下拉选项菜单美化获取html jQuery div仿select下拉选项菜单美化获取html
绿色下载站的div模拟select下拉菜单美化效果
div模拟select框的实现省市联动三级,div模拟select框的实现省市联动二级,共3套代码
在vue的实际开发过程中，我们如何将以选中的值直接渲染到页面中，这次主要说的是多选框和下拉列表的实现： 测试多选渲染： <div> <input type=checkbox name=hobby :value=item.id :checked=loopsss.indexOf...
select实现下拉树形菜单结构
bootstrap-select插件，jquery实现的下拉选择。
jquery select下拉菜单美化搜索框样式代码
此form select下拉控件是使用div+jq+css实现，其表单功能正常使用，能正常传值。根据需要修改css背景、css宽度、css高度等图片或css样式实现自己想要的select下拉菜单表单美化效果。演示地址：...
div模拟select下拉菜单美化效果实例
Select下拉列表框CssJavascriptCssJavascriptCssJavascript
解决IE6 中select 穿透 div 等层的问题
bootstrap-select下拉选择搜索框，可以多选和单选，用法非常简单，样式美观，项目中经常会使用到，特别选项过多的时候，欢迎大家下载使用
用DIV模仿SELECT下拉框 function replaceSelects() { try{ for (i=0;i;i++){ // 隐藏 select selects[i].style.display = 'none'; select_divTag = document.createElement('div'); select_divTag.id = ...
div 模拟 select 多选 实现还有点bug，望大家一起改正。