用JS做一个弹出框。显示内容为选择性别

就是日历JS控件一样，当鼠标在文本框中一点。那么就弹出一个小框框。选择性别：男　或　女
按了男或女之后。将内容回填到鼠标点中的那个文本框中。

大家明白我的意思没有？我对JS有点茫然。请大家帮帮忙。谢谢各位高手！

12 个解决方案

#1

可以用层或模态窗口

#2

用层吧~

#3

处理文本框的onfocus事件,显示一个包含2个链接(或span)的DIV，再处理链接的onclick事件.

#4

用模式窗口的例子：
第一个页面：
<html>
<body>
单击选择性别：
<input type = "text" name = "userSex" readOnly onclick="loadSmallWindow(this)" code="">
</body>
<script language="javascript">
function loadSmallWindow(obj)
{
var returnValue = showModalDialog("second.html",window,"dialogWidth:150px;dialogHeight:90px;status:no");
document.all("userSex").value = returnValue;
}
</script>
</html>
窗口页面second.html：
<html>
<body>
<select name = "sel_sex">
<option value = "男">男</option>
<option value = "女">女</option>
</select>
<input type="submit" value = "确定" onclick="aa()">
</body>
<script language="javascript">
window.returnValue = "";
function aa()
{
window.returnValue = document.all("sel_sex").value;
window.close();
}
</script>
</html>

#5

对了，上文例子中文本框最好是onfocus事件
我写成onclick事件了

#6

用层做的例子：
<html>
<body>
<div id="div" style="width:150px;height=90px;display:none;background-color:#ffffee;boder-collapse:collapse;border-color:#000000;border-style:solid;border-width:1px;position:absolute;z-index:100"><select name = "selSex"><option value = "男">男</option><option value = "女">女</option></select><input type="button" name = "btnOk" value = "确定"></div>
单击选择性别：
<input type = "text" name = "userSex2" readOnly onfocus="loadSmallWindow2(this)">
</body>
<script language="javascript">
function loadSmallWindow2(obj)
{
var div = document.getElementById("div");
div.style.display = "";
div.style.top = obj.offsetTop + obj.clientHeight + 2;
div.style.left= obj.offsetLeft;
document.all("btnOk").onclick = function(){
onSelectSex(obj,div);
};
}

function onSelectSex(obj,divObj)
{
var sel = document.all("selSex");
obj.value = sel.value;
divObj.style.display = "none";
}
</script>
</html>

以上是我写的两个例子
我只是写个很简单的例子，如果用层，建议把层放在iframe上面，然后控制iframe什么时候隐藏什么时候显示。

#7

bucuo

#8

结帖。谢谢两位热心高手！

#9

再次感谢

#10

我将 div.style.top = obj.offsetTop + obj.clientHeight + 2;
div.style.left= obj.offsetLeft;

写入到我的ASPX中。在CS中这样调用：
this.textBox.Attributes.Add("onfocus", "loadSmallWindow2(this)");

怎么弹出来的框在屏幕的左上角呢？好偈是 obj.offsetTop 没有作用一样，我用具体数字比如500，就有效果。
请问还有什么方法可以定位？

#11

哦，你是在asp.net里加的，按说是没什么区别才对啊
用JSP或者HTML这样写都对着
我对ASP.NET不是很熟，会不会是因为ASP.NET的页面元素是在后台文件定位好的，而不是页面上用HTML标记定位的缘故呢？不过这只是猜想，我对ASP.NET只是初学者，好多东西还不明白。

#12

好的。谢谢：）

#1