Question

我希望使用javascript在下拉列表中有多个值，这样就不需要在select标签的选项中写入太多的值，所以我使用下面的代码来执行此操作但是在打开时显示不可见的值在Internet Explorer中意味着分配的空间是可见的，但不是内容，在chrome＆amp;它没有显示任何内容。

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

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

Answer 1

您可以使用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);   
          } 
       }

Answer 2

这在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>

Answer 3

这是在Microsoft注册的错误 You can check it here

所以我推荐

而不是使用你的代码

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

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

3 个答案: