这个东西怎么实现?点input框,然后再弹出来的列表选择 本帖最后由 neosmemory 于 2011-05-26 20:15:31 编辑 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 http://blog.csdn.net/xielingxu/archive/2007/08/26/1759465.aspx 其实这种实现方式有很多种,如果只要静态页面实现效果的话那更简单了你先将显示省市的div隐藏,然后在input里面加个onclick事件,将div的display改为block获取input的绝对位置,将div显示在该位置下面,具体效果要自己慢慢调,最主要的注意点就是选择div里每个省市的时候可以将该省市传入input中,并把对应的id编号传入对应的hidden作用域中,你可以将div中的布局改为table布局,没个td的id作为所需要传入hidden作用域的idtd的innerText作为传入input的值,给每个有省市的td加上onclick事件,点击后将id和innerText传入对应标签,然后关闭层 <script> function $(id) { return document.getElementById(id); } //显示民族div function showdiv(divid) { //获取到民族div $(divid).style.display = "block"; //设置上边距 $(divid).style.top = window.event.clientY + "px"; $(divid).style.left = (window.event.clientX + 50) + "px"; } //验证单选框 function validRadio(name) { //获取到所有的单选框,循环判断每个单选框是否选中 var sexs = document.getElementsByName(name); var returnvalue = ""; for (var i = 0; i < sexs.length; i++) { if (sexs[i].checked) { returnvalue = sexs[i].value; break; } } return returnvalue; } //民族的确定按钮 function setvalue() { //先判断是否有选中民族 var reval = validRadio("jg1"); if (reval == "") { alert("民族不能为空!"); return false; } else { $("mz").value = reval; //隐藏div; $("jg").style.display = "none"; } } </script> 民族:<input id="mz" type="text" class="input" size="9" onclick="showdiv('jg')" />点击文本框进行选择 <div id="jg" style="position: absolute; width: 250px; height: 120px; z-index: 1; border: solid 1px #B1DE27; background-color: #FFFFFF; display: none; top: 320px; left: 450px"> <div style="width: 250px; height: 22px; background-color: #CCCCCC"> <a onclick="document.getElementById('jg').style.display='none'" title="关闭" style="cursor: pointer; float: right; margin-top: 3px; display: inline;">×</a> </div> <div style="padding: 4px; border-top: 0px; padding-bottom: 8px; display: block; padding-top: 0px; padding-left: 5px;"> <input type="radio" value="汉族" name="jg1" />汉族<input type="radio" name="jg1" value="维吾尔族" />维吾尔族<input type="radio" name="jg1" value="朝鲜族" />朝鲜族<input type="radio" name="jg1" value="白族" />白族<br /> <input name="jg1" type="radio" value="满族" />满族<input name="jg1" type="radio" value="苗族" />苗族<input name="jg1" type="radio" value="回族" />回族<input type="radio" name="jg1" value="白族" />白族<br /> <input type="radio" name="jg1" value="藏族" />藏族<input type="radio" name="jg1" value="羌族" />羌族<input name="jg1" type="radio" value="壮族" />壮族<input type="radio" value="傣族" name="jg1" />傣族<br /> </div> <div align="center"> <input type="button" onclick="setvalue();" value="确定" /> <input type="button" value="关闭" onclick="document.getElementById('jg').style.display='none'" /></div> </div> 这个就是div层,嵌套来处理,具体的网上有很多例子的 js求高度缓存 急~~~~~~~~~~~~~~~求带checkbox的js树~~~~~~~ 实现这个功能,这段代码怎么改?? easyui-datagrid的问题 只能输入数字 js如何在页面上调用window的字体对话框, 在一个TEXT中如何触发回车事件???在线等 怎样优化下面的代码呢?如果有更多的Layer呢? 问题1 多行表单,如何自动计算金额? 有对xloadtree了解的吗 如何往二维数组里添加值
你先将显示省市的div隐藏,然后在input里面加个onclick事件,将div的display改为block
获取input的绝对位置,将div显示在该位置下面,具体效果要自己慢慢调,最主要的注意点就是
选择div里每个省市的时候可以将该省市传入input中,并把对应的id编号传入对应的hidden作
用域中,你可以将div中的布局改为table布局,没个td的id作为所需要传入hidden作用域的id
td的innerText作为传入input的值,给每个有省市的td加上onclick事件,点击后将id和innerText
传入对应标签,然后关闭层
function $(id) {
return document.getElementById(id);
}
//显示民族div
function showdiv(divid) {
//获取到民族div
$(divid).style.display = "block";
//设置上边距
$(divid).style.top = window.event.clientY + "px";
$(divid).style.left = (window.event.clientX + 50) + "px";
}
//验证单选框
function validRadio(name) {
//获取到所有的单选框,循环判断每个单选框是否选中
var sexs = document.getElementsByName(name);
var returnvalue = "";
for (var i = 0; i < sexs.length; i++) {
if (sexs[i].checked) {
returnvalue = sexs[i].value;
break;
}
}
return returnvalue;
}
//民族的确定按钮
function setvalue() {
//先判断是否有选中民族
var reval = validRadio("jg1");
if (reval == "") {
alert("民族不能为空!");
return false;
}
else {
$("mz").value = reval;
//隐藏div;
$("jg").style.display = "none";
}
}
</script> 民族:<input id="mz" type="text" class="input" size="9" onclick="showdiv('jg')" />点击文本框进行选择 <div id="jg" style="position: absolute; width: 250px; height: 120px; z-index: 1;
border: solid 1px #B1DE27; background-color: #FFFFFF; display: none; top: 320px;
left: 450px">
<div style="width: 250px; height: 22px; background-color: #CCCCCC">
<a onclick="document.getElementById('jg').style.display='none'" title="关闭" style="cursor: pointer;
float: right; margin-top: 3px; display: inline;">×</a>
</div>
<div style="padding: 4px; border-top: 0px; padding-bottom: 8px; display: block; padding-top: 0px;
padding-left: 5px;">
<input type="radio" value="汉族" name="jg1" />汉族<input type="radio" name="jg1" value="维吾尔族" />维吾尔族<input
type="radio" name="jg1" value="朝鲜族" />朝鲜族<input type="radio" name="jg1" value="白族" />白族<br />
<input name="jg1" type="radio" value="满族" />满族<input name="jg1" type="radio" value="苗族" />苗族<input
name="jg1" type="radio" value="回族" />回族<input type="radio" name="jg1" value="白族" />白族<br />
<input type="radio" name="jg1" value="藏族" />藏族<input type="radio" name="jg1" value="羌族" />羌族<input
name="jg1" type="radio" value="壮族" />壮族<input type="radio" value="傣族" name="jg1" />傣族<br />
</div>
<div align="center">
<input type="button" onclick="setvalue();" value="确定" /> <input type="button"
value="关闭" onclick="document.getElementById('jg').style.display='none'" /></div>
</div>