急呀！两个关联下拉列表框的可输入问题

新代码，帮忙看一下
<html>
<head>
<title>test</title>
</head><SCRIPT language="javascript" >
var hospitalList = new Array("请选择医院","北京同仁医院","北京积水潭医院","北京朝阳医院","北京大学第一医院","北京大学第三医院");
var roomList = new Array( );
roomList[0] = new Array("请选择科别");
roomList[1] = new Array("眼科","耳鼻喉科","心血管科","外科","内科");
roomList[2] = new Array("创伤骨科","手外科","烧伤科","内科","外科","放射科");
roomList[3] = new Array("心脏血管外科","内分泌内科","血液内科","呼吸内科","消化内科","肾脏内科","整形烧伤外科");
roomList[4] = new Array("运动医学研究所","妇产科","神经内科");
roomList[5] = new Array("内科系统","外科系统","妇儿科","五官科","其他科室","医技科室","基础医学研究中心");function initSelect1()
{
while ( document.form1.hospital.options.length > 0)
hospital.options.remove(0);
for (var i = 0; i < hospitalList.length; i++)
{
var opt = document.createElement("OPTION");
opt.value = hospitalList[i];
opt.text = hospitalList[i];
document.form1.hospital.options.add(opt);
opt = null;
}
initSelect2();
document.form1.hospital.onchange = initSelect2;
}function initSelect2()
{
while (document.form1.room.options.length > 0)
document.form1.room.options.remove(0);
var myArr = roomList[document.form1.hospital.selectedIndex];
for (var i = 0; i < myArr.length; i++)
{
var opt = document.createElement("OPTION");
opt.text = myArr[i];
opt.value = myArr[i];
document.form1.room.options.add(opt);
opt = null;
}
}function window.onload()
{
initSelect1( document.form1.hospital );
}</SCRIPT><body>
<form name="form1" method="post" action="">
<tr>
<td align="right"><font color="#006600" style="position:absolute z-index:1">医院：</font></td>
<td colspan="2">

<div style="position:absolute; width:100px; clip:rect(2px 98px 18px 82px); z-index:2; visibility: visible;">
<select name= "hospital" id = "hospital" onchange = "edit_hospital.value = this.value;edit_hospital.select()" style="width:100px"> </select>
</div>
<input name="edit_hospital" type="text"  id = "edit_hospital" class = "in" autocomplete="off" style="width:100px; Z-INDEX:1; POSITION:absolute; visibility: visible;" />
</td>
</tr>
<br>
<tr>
                          <td> </td>
                          <td align="right"><font color="#006600">科别：</font></td>
                          <td colspan="2"> <Select id = "room" ></Select>
                            <font color="#FF9900">*</font></td>
                        </tr>
</form>
</body>
</html>

直接用select对象是不可能实现可编辑的效果,你需要组合select+input来模拟下拉编辑修改框.可参考.
http://expert.csdn.net/Expert/topic/2608/2608835.xml?temp=.3497126
这是网友封装的htc下拉编辑框

我现在就是是用select+input来模拟的，只是语句onchange = "edit_hospital.value = this.value"在select变换时编辑框中无显示

楼主的onchange事件没有响应呀!

楼主在 initSelect1() 这个方法中巳经给select框设置onchange事件。
document.form1.hospital.onchange = initSelect2;
下面这个select框里的onchange事件当然也就不会响应啦！
<select name= "hospital" id = "hospital" onchange = "edit_hospital.value = this.value;edit_hospital.select()" style="width:100px"> </select>你把
edit_hospital.value = this.value;edit_hospital.select()
这段代码写到initSelect2（）方法里就行了，当然还要改一下了：）

这下好了
<html>
<head>
<title>test</title>
</head><SCRIPT language="javascript" >
var hospitalList = new Array("请选择医院","北京同仁医院","北京积水潭医院","北京朝阳医院","北京大学第一医院","北京大学第三医院");
var roomList = new Array( );
roomList[0] = new Array("请选择科别");
roomList[1] = new Array("眼科","耳鼻喉科","心血管科","外科","内科");
roomList[2] = new Array("创伤骨科","手外科","烧伤科","内科","外科","放射科");
roomList[3] = new Array("心脏血管外科","内分泌内科","血液内科","呼吸内科","消化内科","肾脏内科","整形烧伤外科");
roomList[4] = new Array("运动医学研究所","妇产科","神经内科");
roomList[5] = new Array("内科系统","外科系统","妇儿科","五官科","其他科室","医技科室","基础医学研究中心");function initSelect1()
{
while ( document.form1.hospital.options.length > 0)
hospital.options.remove(0);
for (var i = 0; i < hospitalList.length; i++)
{
var opt = document.createElement("OPTION");
opt.value = hospitalList[i];
opt.text = hospitalList[i];
document.form1.hospital.options.add(opt);
opt = null;
}
initSelect2();
document.form1.hospital.onchange = initSelect2;
}function initSelect2()
{
while (document.form1.room.options.length > 0)
document.form1.room.options.remove(0);
var myArr = roomList[document.form1.hospital.selectedIndex];
for (var i = 0; i < myArr.length; i++)
{
var opt = document.createElement("OPTION");
opt.text = myArr[i];
opt.value = myArr[i];
document.form1.room.options.add(opt);
opt = null;
} document.all.edit_hospital.value = document.all.hospital.options[document.all.hospital.selectedIndex].value; //********加了这段代码***************

}function window.onload()
{
initSelect1( document.form1.hospital );
}</SCRIPT><body>
<form name="form1" method="post" action="">
<tr>
<td align="right"><font color="#006600" style="position:absolute z-index:1">医院：</font></td>
<td colspan="2">

<div style="position:absolute; width:100px; clip:rect(2px 98px 18px 82px); z-index:2; visibility: visible;">
<select name= "hospital" id = "hospital" onchange = "edit_hospital.value = this.value;edit_hospital.select()" style="width:100px"> </select>
</div>
<input name="edit_hospital" type="text"  id = "edit_hospital" class = "in" autocomplete="off" style="width:100px; Z-INDEX:1; POSITION:absolute; visibility: visible;" />
</td>
</tr>
<br>
<tr>
                          <td> </td>
                          <td align="right"><font color="#006600">科别：</font></td>
                          <td colspan="2"> <Select id = "room" ></Select>
                            <font color="#FF9900">*</font></td>
                        </tr>
</form>
</body>
</html>

调试易

急呀！两个关联下拉列表框的可输入问题

解决方案 »