多个input(type=text)，其值都从一个Select中选择，如何实现

页面上有7个input(input1,input2,...,Input7)，分别显示星期1--星期日的值班人的名称，而值班人是从后台数据库中取出填好了(约20人)，操作者点击星期1对应的input1时，在input1的正下方显示这个select，操作者点击星期2对应的input2时，在input2的正下方显示这个select，......,操作者点击星期日对应的input7时，在input7的正下方显示这个select,共操作者选择

现在难就难在如何移动这个select到Input1,...,Input7的正下方

var topH=30;
for(var input =0;input<7;input++)
{
topH+=60;<input type="text" top=topH id="input"+input>
<select id=input>
</select>
}

谢songxianping 大侠的指点，看你给的代码，好象要生成7个select?

<!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 http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function getOffset(obj){
var x = 0, y = 0;
do{
x += obj.offsetLeft;
y += obj.offsetTop;

obj = obj.offsetParent;
}while(obj);
return {x:x, y:y};
}
function clickText(){
var sel = document.getElementById("sel");
var pos = getOffset(this, document.body);
sel.style.position = "absolute";
sel.style.left = pos.x + "px";
sel.style.top = pos.y + this.offsetHeight + "px";

}
window.onload = function(){
var inputs = document.getElementById("form1").getElementsByTagName("input");
for(var i=0; i<inputs.length; i++){
inputs[i].onclick = clickText;
}
};
</script>
</head><body>
<form id="form1" name="form1">
<input name="txt1" type="text" id="txt1" size="15" />
<input name="txt2" type="text" id="txt2" size="15" />
<input name="txt3" type="text" id="txt3" size="15" />
<input name="txt4" type="text" id="txt4" size="15" />
<input name="txt5" type="text" id="txt5" size="15" />
<input name="txt6" type="text" id="txt6" size="15" />
<input name="txt7" type="text" id="txt7" size="15" /><select id="sel" name="sel">
<option value="1">111111</option>
<option value="1">222222</option>
<option value="1">333333</option>
</select>
</form>
</body>
</html>

getOffset(this, document.body);改成 getOffset(this);

Free_Wind22 大侠，先谢了！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
</HEAD>
<BODY>
  <input type="text" size="10">星期一
  <input type="text" size="10">星期二
  <input type="text" size="10">星期三
  <input type="text" size="10">星期四
  <input type="text" size="10">星期五
  <input type="text" size="10">星期六
  <input type="text" size="10">星期天
  <select id="sel" style="position:absolute;display:none;">
  </select>
  <script>
var duty = [["张大", "王大", "李大"],
["张二", "王二", "李二"],
["张三", "王三", "李三"],
["张四", "王四", "李四"],
["张五", "王五", "李五"],
["张六", "王六", "李六"],
["张天", "王天", "李天"]
]

var inputArr = document.getElementsByTagName("input");
var sel = document.getElementById("sel");
for(var i=0; i<inputArr.length;i++){
inputArr[i].onclick = function(i){
return function(){
sel.style.display = "";
sel.options.length = 0;
var pos = Position(inputArr[i]);
sel.style.top = pos.y + 40 + "px";
sel.style.left = pos.x + "px"; for(var j=0; j<duty[i].length;j++){
sel.options[j] = new Option(duty[i][j], duty[i][j]);
}
sel.onchange = function(){ inputArr[i].value = this.value; };
inputArr[i].value = duty[i][0];
};
}(i);
} function Position(obj){
var objResult = { x:obj.offsetLeft, y:obj.offsetTop};
while( (obj = obj.offsetParent)){
objResult.y += obj.offsetTop;
objResult.x += obj.offsetLeft;
}
return objResult;
}
  </script>
</BODY>
</HTML>

如果想弄成动态的把数据导入到duty数组就行了

再请大侠们指点，又如何将所选值写入到对应的input中呢？

把select做成层移动不就可以了

lsc1202001 大侠已将所选的值填进去了，谢谢！

我那里已经解决了哦  有点小改动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <style>
  input{ width:100px; height:20px;}
  </style>
</HEAD>
<BODY>
  <input type="text" size="10">星期一
  <input type="text" size="10">星期二
  <input type="text" size="10">星期三
  <input type="text" size="10">星期四
  <input type="text" size="10">星期五
  <input type="text" size="10">星期六
  <input type="text" size="10">星期天
  <select id="sel" style="position:absolute;display:none;">
  </select>
  <script>
var duty = [["张大", "王大", "李大"],
["张二", "王二", "李二"],
["张三", "王三", "李三"],
["张四", "王四", "李四"],
["张五", "王五", "李五"],
["张六", "王六", "李六"],
["张天", "王天", "李天"]
]

var inputArr = document.getElementsByTagName("input");
var sel = document.getElementById("sel");
for(var i=0; i<inputArr.length;i++){
inputArr[i].onclick = function(i){
return function(){
sel.style.display = "";
sel.options.length = 0;
var pos = Position(inputArr[i]);
sel.style.top = pos.y + 30 + "px";
sel.style.left = pos.x + "px"; for(var j=0; j<duty[i].length;j++){
sel.options[j] = new Option(duty[i][j], duty[i][j]);
}
sel.onchange = function(){ inputArr[i].value = this.value; };
if(inputArr[i].value == "") inputArr[i].value = duty[i][0];
};
}(i);
} function Position(obj){
var objResult = { x:obj.offsetLeft, y:obj.offsetTop};
while( (obj = obj.offsetParent)){
objResult.y += obj.offsetTop;
objResult.x += obj.offsetLeft;
}
return objResult;
}
  </script>
</BODY>
</HTML>

<!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 http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
var textbox = null;
function getOffset(obj){
var x = 0, y = 0;
do{
x += obj.offsetLeft;
y += obj.offsetTop;

obj = obj.offsetParent;
}while(obj);
return {x:x, y:y};
}
function clickText(){
var sel = document.getElementById("sel");
var pos = getOffset(this);
sel.style.position = "absolute";
sel.style.left = pos.x + "px";
sel.style.top = pos.y + this.offsetHeight + "px";
textbox = this;
}
function selValue(obj){
if(textbox){
textbox.value = obj.options[obj.selectedIndex].value;
}
}
window.onload = function(){
var inputs = document.getElementById("form1").getElementsByTagName("input");
for(var i=0; i<inputs.length; i++){
inputs[i].onclick = clickText;
}
};
</script>
</head><body>
<form id="form1" name="form1">
<input name="txt1" type="text" id="txt1" size="15" />
<input name="txt2" type="text" id="txt2" size="15" />
<input name="txt3" type="text" id="txt3" size="15" />
<input name="txt4" type="text" id="txt4" size="15" />
<input name="txt5" type="text" id="txt5" size="15" />
<input name="txt6" type="text" id="txt6" size="15" />
<input name="txt7" type="text" id="txt7" size="15" /><select id="sel" name="sel" onchange="selValue(this);">
<option value="0">请选择</option>
<option value="111111">111111</option>
<option value="222222">222222</option>
<option value="333333">333333</option>
</select>
</form>
</body>
</html>

谢Free_Wind22与lsc1202001两位大侠，最后想实现：选好一项后，暂时隐藏这个select,等点击下一个input时，再将select显示出来，谢谢！

sel.onchange = function(){ inputArr[i].value = this.value; this.style.display = 'none'};

最后再次感谢Free_Wind22与lsc1202001两位大侠，结贴献分，收获太大！

调试易

多个input(type=text)，其值都从一个Select中选择，如何实现

解决方案 »