在下拉列表中获取不可见的值

我想在使用javascript的下拉列表中有多个值，因此不需要在选择标记的选项中写入太多值，因此我使用下面的代码来执行此操作，但它是当在Internet Explorer中打开时显示不可见值意味着分配的空间是可见的但不是内容，在Chrome浏览器中它不显示任何内容。在下拉列表中获取不可见的值

<script> 
    function Time(){ 
     selectHr(); 
     selectMin(); 
     selectSec(); 
    } 

    function selectHr() 
     { 
      for(var x=1;x<=24;x++) 
       { 
       var option = document.createElement("option"); 
       option.text = x; 
       option.value=x; 
       document.getElementById('dateTime_selHr').add(option); 
      } 
     } 
     function selectMin() 
     { 
      for(var x=1;x<=60;x++) 
       { 
        var option = document.createElement("option"); 
        option.text = x; 
        option.value=x; 
        document.getElementById('dateTime_selMin').add(option); 
       } 
      }  

     function selectSec() 
     { 
      for(var x=1;x<=60;x++) 
       { 
        var option = document.createElement("option"); 
        option.text = x; 
        option.value=x; 
        document.getElementById('dateTime_selSec').add(option); 
       } 
     } 

    </script> 
    </head> 

    <body onload="Time()"> 
    <table class="table" id="dateTime_tbl"> 
     <tr> 
     <td> 
       Camera&nbsp;&nbsp;&nbsp; 
       </td> 
      <td colspan="2"> 
       <input type="text" name="camera" /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
      Time In Camera Date 
      </td> 
      <td> 
      Date &nbsp;&nbsp;<input type="text" name="date"/> 
      Time&nbsp;&nbsp; <input type="text" name="time" /> 
      </td> 
     </tr> 
     <tr> 
      <td> Set Time</td> 
      <td> 
     <input type="radio" /> Set manually 
     </td> 
     </tr> 
     <tr> 
     <td></td> 
      <td>Date&nbsp;&nbsp; <input type="text" name="txtdate"   />   &nbsp;&nbsp;&nbsp;&nbsp; 
      Time &nbsp;&nbsp; 
      hr : <span> <select name="hr" id="dateTime_selHr">  </select>   </span>  
      min : <span> <select name="min" id="dateTime_selMin" > </select> </span>  
      sec : <span> <select name="sec" id="dateTime_selSec" > </select> </span> 

      </td> 
     </tr> 
     <tr> 
     <td></td> 
      <td> 
       <input type="radio" name="syncTime" />Synchronize with computer time 
      </td> 
     </tr> 
     <tr> 
      <td></td> 
      <td> 
       Date&nbsp;&nbsp; <input type="text" /> 
        &nbsp;&nbsp;&nbsp;&nbsp; 
        Time&nbsp;&nbsp;<input type="text" /> 
       </td> 
     </tr> 
     <tr> 
     <td></td> 
      <td> 
       <input type="radio" /> Synchronize with SNTP server 
      </td> 

     </tr> 
     <tr> 
      <td></td> 
      <td> 
       SNTP Server&nbsp;&nbsp;&nbsp; <input type="text" style="width:200px"/> 
      </td> 
     </tr> 
     <tr> 
      <td></td> 
      <td> 
       Time Zone&nbsp;&nbsp;&nbsp; <span> <select name="timeZone"> 
         <option></option> 
       </select></span> 
      </td> 
     </tr> 
     <tr> 
      <td></td> 
      <td> 
        <input type="checkbox" /> Automatically adjust for daylight saving time changes 
      </td> 

     </tr> 
     <tr> 

      <td> 
       Date Format &nbsp;&nbsp;&nbsp; <span><select> 
         <option>-select-</option> 
         <option>YYYY/MM/DD</option> 
         <option>MM/DD/YYYY</option> 
         <option>DD/MM/YYYY</option> 
       </select></span> 
      </td> 

      <td> 
       Time Format&nbsp;&nbsp;&nbsp; <span> <select> 
         <option>-select-</option> 
         <option>12 hour format</option> 
         <option>24 hour format</option> 
          <option>DD/MM/YYYY</option> 
        </select></span> 
      </td> 
     </tr> 
     <tr> 

      <td> 
      Date Position&nbsp;&nbsp;&nbsp;<span><select> 
        <option>-select-</option> 
         <option>Bottom Left</option> 
         <option>Bottom Right</option> 
      </select></span> 
      </td> 

      <td> 
       Time Position&nbsp;&nbsp;&nbsp;<span> <select> 
        <option>-select-</option> 
         <option>Bottom Left</option> 
         <option>Bottom Right</option> 
       </select></span> 
      </td> 
     </tr> 
    </table> 
    <center> 
     <div id="dateTime_actionBtnsDiv"> 
      <button type="button" name="ok" style="width:80px"   id="dtTime_btns">OK</button> 
    <button type="button" name="cancel" style="width:80px" id="dtTime_btns">CANCEL</button> 
    </div> 
    </center> 
    </body>

有人可以帮我解决这个问题吗？

来源

2014-02-21 Priya

可以让我们知道什么叫'隐形values'是什么意思？ –

我测试了你的代码。它似乎工作正常。你遇到了什么错误？ – SpiderCode

@SpiderCode在IE 9对我来说，它显示错误OP状态：http://fiddle.jshell.net/tR2GC/show/ – Ming

你可以使用add（）函数，而不是

function selectFunction() 
     { 
      for(var x=1;x<=5;x++) 
      { 
       var option = document.createElement("option"); 
       option.text = x; 
       option.value=x; 
       document.getElementById('selectId').add(option); 
      } 
     }

来源

2014-02-21 07:30:40

是的，它正在工作....谢谢！ – Priya

如果上述解决方案能够解决您的问题，请检查答案 –

这工作得很好，并在IE浏览器进行测试。

<script> 
     function selectFunction() 
      { 
       var selector = document.getElementById('selectId'); 
       for(var x=1;x<=5;x++) 
        { 
        var opt = document.createElement('option'); 
        opt.value  = x; 
        opt.innerHTML = x; 
        selector.appendChild(opt); 
        } 
      } 
     </script> 

     <body onload="selectFunction()"> 
      <select id="selectId"></select> 
     </body>

来源

2014-02-21 07:34:01

这是错误与微软 You can check it here

因此而不是使用我们的代码注册，我建议

var option = document.createElement("option"); 
option.text = x; 
option.value=x; 
document.getElementById('selectId').add(option);

来源

2014-02-21 08:48:54 user3386797

在下拉列表中获取不可见的值

回答

相关问题