選擇某個下拉列表時添加一個文本框

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> 

問題IM面可以看這裏住....

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

Answer 1

你的HTML是無效，您不應該爲多個元素使用相同的ID。當您使用document.getElementById()它只能找到其中之一（第一，在大多數瀏覽器） - 注意，這方法是get元素（單數），不能獲得元素（複數）...

這就是爲什麼在你的演示頁面標籤出現，但不是文本框（與您在「問題中的陳述」相反，但不添加任何內容）。

爲什麼不移動id="color"到包含兩個項目的<tr>元素，以便您可以顯示或隱藏整行？