Question

我在脚本中遇到问题。当我从下拉列表中选择加拿大时，它应该添加一个文本框，但它不会添加任何内容。

<style>
          #color {display:none;}
       </style>


       <script>
          (function(d){
             var options={
                val:'Canada',
                sel_id:'country',
                hid_id:'color'
             };
             var browser={
                modern:function(){
                   var method=null;
                   if(d.addEventListener) {
                      method=['DOMContentLoaded',true];
                   } else if(d.attachEvent) {
                      method=['readystatechange',false];
                   }
                   return(method);
                },
                addEvent:function(elem,event,func){
                   if(this.modern()[1]) {
                      elem.addEventListener(event,func,false);
                   } else {
                      elem.attachEvent('on'+event,func);
                   }
                }
             };
             var load=browser.modern()[0];
             var modern=browser.modern()[1];
             var init=function(){
                if((!modern && d.readyState=='complete') || modern) {
                   var select=d.getElementById(options.sel_id);
                   var input=d.getElementById(options.hid_id);
                   browser.addEvent(select,'change',function(){
                      var val=this.value;
                      var display=(val==options.val) ? 'block' : 'none';
                      input.style.display=display;
                   });
                }
             };
             browser.addEvent(d,load,init);
          })(document);
       </script>

这是javascript函数，下面是html代码

<tr> 
                                            <td height="22" class="bodytxt" id="color">
                                                <font size="2" face="Geneva, Arial, Helvetica, sans-serif">Date of Birth </font>
                                            </td>

                                            <td height="22" class="bodytxt" id="color">
                                                <input type="text" size="20"  name="color" value="<?=$_REQUEST['dob']?>" />


</td></tr>

我面临的问题可以在这里看到....

http://www.sunno.com/medical/clients/test.html

Answer 1

你的html无效，你不应该为多个元素使用相同的id。当你使用document.getElementById()时，它只会找到其中一个（第一个，在大多数浏览器中） - 注意该方法是get元素（单数），而不是get元素（复数）......

这就是为什么在您的演示页面中出现标签而不是文本框（与您在问题中的陈述相反“但它没有添加任何内容”）。

为什么不将id="color"移动到包含这两个项目的<tr>元素，以便您可以显示或隐藏整行？

选择某个下拉列表时添加txt框

1 个答案: