从DIV弹出层中返回值到网页元素

很多时候上网看到网上一些选择功能，都是用一个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元素中后如何导入数据库，希望以后能够进一步解决。