`
sxpyrgz
  • 浏览: 72324 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

刚刚写的select操作,与DIV弹出

阅读更多
<!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 content="text/html; charset=GBK" http-equiv="Content-Type" />
<title>无标题 1</title>
<style type="text/css">
#loader {
padding:0;
margin:0;
position:absolute;
top:0; left:0;
width:100%; height:100%; 
background:#ededed;
z-index:999;
display:none;
vertical-align:center;
filter:alpha(opacity=80);
-moz-opacity:0.8;
  opacity: 0.8;
}
#top {
border:1px solid #cee3ff;
padding:0;
margin:0;
position:absolute;
top:100 ; left:300;
width:300px; height:200px; 
background:#ededed;
vertical-align:center;
z-index:1000;
display:none;
text-align: center;

}
html,body{
margin:0px;
width:100%;
height:100%;
}
</style>
<script type="text/javascript">
var divMessage={
bottomId : "loader", //最底层DIV也就是全屏DIV
topId : "top", //顶层DIV
textAreaId        : "textarea", //div中文本框ID
          divBottom : function(){   //得到底层对象
     return document.getElementById(this.bottomId);
     },
     divTop:function(){ //得到顶层对象
     return document.getElementById(this.topId);
     },
     textObj:null,
     textAreaObj:function(){  //得到区域对象
     return document.getElementById(this.textAreaId);
     }
}

divMessage.show=function(textObj){
divMessage.textObj = textObj;
document.getElementById(this.textAreaId).value=textObj.value;
divMessage.divTop().style.display ='block';
divMessage.divBottom().style.display ='block';

}
divMessage.hidden= function(){
divMessage.divTop().style.display ='none';
divMessage.divBottom().style.display ='none';
}
//点击DIV上的确定改变文本框的值
divMessage.changeObj=function(textId){
divMessage.textObj.value = document.getElementById(textId).value;
divMessage.hidden();

}
/**
* 以下三个函数操作SELECT可以给
* @param id为要操作的SELECT的ID
* 功能:可以 var sel =new SelOperate(id)
*/
function SelOperate(id)
{
this.id = id;
this.sel = document.getElementById(id);
}
/**
*清楚select中的选项 sel.clean();
*/
SelOperate.prototype.clean=function()
{
var length = this.sel.options.length;
while(length>0){
this.sel.removeChild(this.sel.options[0]);
length--;
}
}
/**
*增加select中的OPTION;
*/
SelOperate.prototype.add=function(selValue,selName)
{
var option = document.createElement("option");
option.setAttribute("value", selValue);
option.innerHTML= selName;
this.sel.appendChild(option);
}
/**
*将select符合条件的值选中
*/
SelOperate.prototype.selChecked=function(objValue){
for(var i = 0 ;i<this.sel.length;i++){
if(this.sel[i].value==objValue){
this.sel.options[i].setAttribute("selected",true); 
}
}
}

/**********************************************/


function addOptions(){
var sel= new SelOperate("selTest");
sel.clean();
for(var i=0;i<5;i++){

sel.add("value"+1,"name"+i)
}
}

</script>


</head>

<body>
<div id="top">
<div id="title" style="height: 23px;padding:5px;background-image: url('<%=path%

>/ecgrid/images/gird/footerBg.gif');" >请输入提示信息</div>
<textarea  id="textarea" style="width:100%;height:200px;border:0px;margin:1px;

overflow: auto;"></textarea>
<input  type="button" name="确定"  class="dataForm_button" value="确 定"

onclick="divMessage.changeObj('textarea')">

</div>
<div id="loader"><iframe frameborder="0" width="100%" height="100%" src=""></iframe></div>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
a<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
a<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
a<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
a<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
a<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
a<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
a<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
a<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
a<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
a<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
a<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
a<br>
<select id="selTest">
<option>哈哈哈哈</option>
</select>
<input type="text" value="show" onclick="divMessage.show(this)" >
<input type="button" value="show" onclick="addOptions()" >
</body>

</html>
分享到:
评论

相关推荐

    弹出层案例(针对层div的操作)

    本案例聚焦于使用`div`元素实现弹出层的操作,这是一种轻量级且灵活的方法,适用于各种场景,如提示信息、表单提交、图像预览等。下面我们将详细探讨如何利用HTML、CSS和JavaScript来创建和控制弹出层。 首先,`div...

    div弹出层实现单选功能

    通过JavaScript或者jQuery,我们可以动态地构建和操作这些`div`元素,使其具有与`&lt;select&gt;`类似的功能,同时增强视觉效果和操作体验。 首先,我们需要创建一个包含所有单选选项的`div`容器。每个选项可以是一个独立...

    div做各式弹出窗口案例

    本案例集主要探讨如何利用"div"配合CSS(层叠样式表)和JavaScript来实现各种弹出窗口效果。这些效果对于网页交互性和用户体验至关重要,如消息提示、登录框、模态对话框等。 首先,我们来看"iframe的div遮罩层(可...

    input触发弹出层,实现select 效果

    在这里,`div`将被用来构建弹出层,显示`select`的选项。开发者可以利用CSS来定制这个`div`的样式,包括颜色、大小、位置、过渡效果等,使其看起来像一个下拉菜单。 实现这种效果的基本步骤如下: 1. 创建一个`...

    js+div+css弹出层.txt

    根据给定文件的信息,本文将围绕“js+div+css弹出层”的实现方法进行详细介绍。弹出层在网页设计中十分常见,主要用于提供额外的信息展示或者操作界面,如登录框、注册框、提示信息等。 ### 一、基本概念 #### 1.1...

    JS+DIV代替select,代码完整

    类似百度新闻页的省市两级菜单,点击输入框弹出层显示省,点击省再显示对应的地级市,取代select,省市是两级连动的,这是上一个代码的改写,页面调用比原来的简单,代码更清楚了,现在的有类别,省市,性别选择,...

    jQuery 弹出层 浮动遮罩层 提示框 并随页面滚动而滚动

    如:我想要&lt;div id="ok"&gt;这里是弹出浮动遮罩层&lt;/div&gt; 并随页面滚动而滚动 只要调用 $('#ok').showModel();这个方法就可以了 调用$('#ok').closeModel();就可以关闭层了 这个插件还有个好处是自动隐藏select控件,...

    让div浮动在select之上的完美解决方案!多浏览器兼容

    在网页设计中,有时我们需要使一个`div`元素覆盖或浮动在`select`元素之上,以便实现特定的交互效果,如弹出层、提示信息或者自定义下拉菜单等。然而,由于浏览器之间的渲染差异,这往往成为一个挑战。本文将探讨...

    select 去样式美化(完美兼容)

    例如,当用户点击`div`时,可以弹出一个模拟的下拉菜单,用户选择后更新`div`的显示内容。 2. **伪元素和CSS3**:利用CSS3的伪元素(如`:before`和`:after`)和过渡(transition)、动画(animation)等特性,可以...

    IE6下 Jquery EasyUI 弹出窗口层无法挡住select 组件 解决方案

    1. **修改CSS**:为弹出窗口的div添加一个更高的z-index值。然而,由于IE6的限制,这可能不足以解决问题。还需要确保select元素的z-index低于dialog。 2. **隐藏select元素**:当弹出窗口显示时,可以使用...

    layui问题之模拟select点击事件的实例讲解

    在Web开发中,模拟select元素的点击事件是一项常见的需求,尤其是当我们希望在不直接与页面交互的情况下改变选项值时。本文将通过实例讲解来阐述如何在使用layui框架的情况下,模拟select的点击事件。 ### 标题知识...

    弹出有遮罩的拖动层,简单模拟select(未做界面)

    在这个项目中,“弹出有遮罩的拖动层,简单模拟select(未做界面)”是一个实例,它展示了如何利用这些技术实现一个功能性的UI组件。 首先,让我们详细了解这个项目的组成部分: 1. **遮罩层**:遮罩层是一种常见...

    JavaScript实现弹出DIV层同时页面背景渐变成半透亮效果_.docx

    JavaScript 实现弹出 DIV 层同时页面背景渐变成半透亮效果是一种常见的网页交互设计,它通常用于创建对话框、提示信息或者用户确认操作等场景。这种效果通过 JavaScript 控制 DOM 元素的动态变化来达成,使得用户...

    select option,鼠标移到哪个选向就给出相应的鼠标提示

    在IT行业中,交互设计是用户体验的关键部分,"select option"的选择项交互是网页或应用程序界面设计中的常见元素。本文将围绕“select option”及其相关的鼠标提示功能进行详细讲解。 "Select option"通常指的是...

    ie6下DIV覆盖select框js解决代码

    这在网页设计中是一个常见的兼容性问题,尤其是在尝试创建弹出窗口或浮动元素时。本文将详细介绍如何通过JavaScript来解决这个特定的IE6浏览器中的问题。 首先,我们需要理解IE6的层叠上下文(Stacking Context)...

    HTML5+CSS3自定义浮动Select超炫下拉菜单动画源码

    “旋转形式弹出”的二级菜单可能是通过CSS3的`transform: rotate()`实现的,这允许菜单项在展开时以特定的角度旋转,从而创造出引人注目的动画效果。同时,`transform-origin`属性可以调整旋转的中心点,以实现更...

    jQuery手机端点击弹出层选取时间代码

    2. **创建弹出层结构**:在HTML中,我们可以创建一个隐藏的弹出层元素,如`&lt;div&gt;`,并添加样式使其在默认情况下不可见。这个弹出层将用于显示时间选择器。 3. **定义时间选择器**:可以使用现成的jQuery插件,如`...

    Jquery弹出层

    在网页开发中,jQuery弹出层(也称为模态窗口或对话框)是一种常见的交互设计技术,用于在用户与页面的其他部分互动时提供额外的信息或功能。这种技术可以用于登录、注册、确认操作、显示详细信息等多种场景,极大地...

    js弹出层 城市切换效果

    接下来,我们需要用JavaScript来控制弹出层的显示与隐藏。可以绑定一个事件监听器到触发弹出层的元素,比如按钮: ```javascript document.getElementById('openCitySelect').addEventListener('click', function()...

Global site tag (gtag.js) - Google Analytics