| 网站首页 | 业界新闻 | 群组 | 交易 | 人才 | 下载频道 | 博客 | 代码贴 | 编程论坛
免费IT实战开发视频教程合集分享千里之行 始于足下
共有 83 人关注过本帖
标题:一个页面内的两个相似的文本框,如何设置js,能完成各自功能(一个文本框可 ...
只看楼主 加入收藏
boyfuture
Rank: 1
等 级:新手上路
帖 子:543
专家分:0
注 册:2005-12-20
结帖率:100%
  问题点数:10  回复次数:3   
一个页面内的两个相似的文本框,如何设置js,能完成各自功能(一个文本框可以运行,另外一个始终无法运转)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="m.178hui.com" />
<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" >&nbsp;</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编辑过]

6 天前 20:50
boyfuture
Rank: 1
等 级:新手上路
帖 子:543
专家分:0
注 册:2005-12-20
  得分:0 
烦请各位给个提示吧,像这样的问题该怎么修改代码呢?相似的两个文本框,相似的功能,如何调整js,让下拉框都可以操纵,选择内容后显示,并保存到后台文本框中!
5 天前 08:50
icecool
Rank: 9Rank: 9Rank: 9
等 级:贵宾
威 望:18
帖 子:1145
专家分:1018
注 册:2005-3-14
  得分:0 
js改为如下:
程序代码:

<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;
                      }
        }

       var m;                                                                                 //第二个下拉框的元素current1/options1/select1
       lis = getEle("options1").getElementsByTagName("li");  
       for(m=0,len = lis.length;m<len;m++){
                     lis[m].onclick = function(){
                                 getEle("select1").value = this.getAttribute("rel");  
                                 getEle("options1").style.display = "none";  
                                 getEle("current1").innerHTML = this.innerHTML;
                     }
        }


          getEle("current").onclick=function(){
                      getEle("options").style.display = "block";  
          }

         getEle("current1").onclick=function(){    //第二个下拉框的元素current1/options1
                    getEle("options1").style.display = "block";
          }
}   
  
</script>

loading...
http://www.000332.net
5 天前 09:43
boyfuture
Rank: 1
等 级:新手上路
帖 子:543
专家分:0
注 册:2005-12-20
  得分:0 
真牛,搞定了,非常感谢啊!
4 天前 13:01







关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.028592 second(s), 9 queries.
Copyright©2004-2018, BCCN.NET, All Rights Reserved