一个页面内的两个相似的文本框，如何设置js，能完成各自功能（一个文本框可以运行，另外一个始终无法运转）
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="m. />
<meta name="applicable-device" content="mobile" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title></title>
<script type="text/javascript">
function getEle(id){
return document.getElementById(id);
}
window.onload = function(){
var i;
lis = getEle("options").getElementsByTagName("li");
for(i=0,len = lis.length;i<len;i++)
{ lis[i].onclick = function()
{getEle("select").value = this.getAttribute("rel");
getEle("options").style.display = "none";
getEle("current").innerHTML = this.innerHTML; }
}
getEle("current").onclick=function()
{
getEle("options").style.display = "block"; } }
</script>
<style type="text/css">
spanfont{
font-size: 14px;
color: #E07E57;
display: inline-block;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #249FAF;
border-right-color: #249FAF;
border-bottom-color: #249FAF;
border-left-color: #249FAF;
}
* { margin:0;padding:0;border:0 none;font-family:arial,helvetica,sans-serif;}
#current,#options { border-left:0px; border-top:0px;border-bottom:0px;border-right:0px solid #999; }
#replace {cursor:default;overflow:visible;position:relative;}
#current { background:url("mainpic/arrow-down.png") right center no-repeat;margin-right:0;}
#current,#replace,#options li { width:90px;}
#options { border-top:0 none; display:none;list-style-type:none;margin-top:0;position:absolute;width:100%; color:#999;}
#current,#options li {padding:5px; color:#999;}
#current,#options,#options li {background-color:#FFF;}
#options li:hover{background:#F2F2F2; }
#select{display: none;}
#current1,#options1 { border-left:0px; border-top:0px;border-bottom:0px;border-right:0px solid #999; }
#replace1 {cursor:default;overflow:visible;position:relative;}
#current1 { background:url("mainpic/arrow-down.png") right center no-repeat;margin-right:0;}
#current1,#replace1,#options1 li { width:90px;}
#options1 { border-top:0 none; display:none;list-style-type:none;margin-top:0;position:absolute;width:100%; color:#999;}
#current1,#options1 li {padding:5px; color:#999;}
#current1,#options1,#options1 li {background-color:#FFF;}
#options1 li:hover{background:#F2F2F2; }
#select1{display: none;}
</style>
</head>
<body leftmargin="0" rightmargin="0" topmargin="0" text-align: center; bgcolor="#FFFFFF">
<table width="100%" border="0" cellspacing="0" cellpadding="0"bgcolor="#FFFFFF"><form>
<tr>
<td height="18" colspan="3" align="left" ><table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td height="5" > </td>
</tr>
</table></td>
</tr>
<tr>
<td width="31%" height="32" align="center" class="gwreward"> <select id="select">
<option>所属区域</option>
<option value="1">北京市</option>
<option value="2">天津市</option>
<option value="3">上海市</option>
</select>
<div id="replace" style="color:#CCC">
<div id="current" >所属区域</div>
<ul id="options">
<li rel="1">北京市</li>
<li rel="2">天津市</li>
<li rel="3">上海市</li>
</ul>
</div>
</td>
<td width="40%" align="center" class="gwreward"><select name="id1" id="select1">
<option>所属行业</option>
<option value="1">生产制造业</option>
<option value="2">服务行业</option>
<option value="3">其他</option>
</select>
<div id="replace1" style="color:#CCC">
<div id="current1" >所属行业</div>
<ul id="options1">
<li rel="1">生产制造业</li>
<li rel="2">服务行业</li>
<li rel="3">其他</li>
</ul>
</div> </td>
<td width="29%" align="center" class="gwreward"> </td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td height="2" colspan="3"></td>
</tr></form>
</table>
</body>
</html>
请高手赐教，谢谢。
[此贴子已经被作者于2018-11-7 20:52编辑过]
烦请各位给个提示吧，像这样的问题该怎么修改代码呢？相似的两个文本框，相似的功能，如何调整js，让下拉框都可以操纵，选择内容后显示，并保存到后台文本框中！
程序代码：
真牛，搞定了，非常感谢啊！