很多时候上网看到网上一些选择功能,都是用一个SELECT列表做的,把值做为成列表的OPTION值,进行相应选择就可以了,但是感觉不是很好看,特别是周围都是文本,突然出来一个表单元素,感觉怪怪的,于是想到用一个弹出层来取代列表的功能,这个想法实现的关键在于如何从弹出层上返回选择的值,下面做了一个尝试,算是成功的返回了值。下面介绍完成过程。
网页代码:
……..
<div id="aa"> //用于以后弹出层的位置定位,因为要返回的项有很多,为了使弹出层都靠近点击的不同链接的位置,用了一个相对定位,需要动态ID号,这个ID
<a id="linkA" href="javascript:showscore(“这里传递动态ID参数”)"> //这个ID的作用是以后要通过查找ID找到相应的位置修改里面的值,这个值就是从层中返回的值。需要动态ID号
返回一个数值 //这是超链接,单击弹出某个层
</a>
</div>
弹出层代码://可以自己定义
<div id="dvShow" style="display:none; background:#E2FAFE; margin-left:2px;border:1px solid #cccccc; position:absolute; font-size:14px;color:#0066FF;line-height:20px;width:125px;padding-left:5px;"> </div>
//开始时弹出层是看不到的
。。。。。。。。//其它网页代码
函数代码:
function showscore(a){
var link=$("#aa"+a);
var offset=link.offset(); //这两句将来确定弹出层的相对位置
var width=link.outerWidth();
$("#dvShow"+a).css("top",offset.top);
$("#dvShow"+a).css("left",offset.left+width-20);
var str=";
//这里假设从弹出层上返回一个数值,下面生成数值列表
<span style='width:25px;cursor:pointer;float:left;' class='rdotest' value='1' >1</span>
<span style='width:25px;cursor:pointer;float:left' class='rdotest' value='2'>2</span>
<span style='width:25px;cursor:pointer;float:left' class='rdotest' value='3'>3</span>
<span style='width:25px;cursor:pointer;float:left' class='rdotest' value='4'>4</span>
<span style='width:25px;cursor:pointer;float:left' class='rdotest' value='5'>5</span><br/>
<span style='width:25px;cursor:pointer;float:left' class='rdotest' value='6'>6</span>
<span style='width:25px;cursor:pointer;float:left' class='rdotest' value='7'>7</span>
<span style='width:25px;cursor:pointer;float:left' class='rdotest' value='8'>8</span>
<span style='width:25px;cursor:pointer;float:left' class='rdotest' value='9'>9</span>
<span style='width:25px;cursor:pointer;float:left' class='rdotest' value='10'>10</span>"
$("#dvShow"+a).html(str);//相当于用JS生成HTML脚本
$("#dvShow"+a).css("display","block");//显示层
$(".rdotest").click(function(){
$("#linkA"+a).text($(this).val());//使相应ID的链接文字改变成弹出层上的值
$("#dvShow"+a).css("display","none"); // 点击弹出层上的数值后隐藏弹出层
});
}
。。。。。。。//其它网页代码
在IE下测试正常,但是在FF下没有反应,于是在
FF下面把$("#linkA"+a).text($(this).val());改为:$("#linkA"+a).innerHTML($(this).val());,这样在FF和IE下都能测试通过。至于值传到网页相应ID元素中后如何导入数据库,希望以后能够进一步解决。