通过JavaScript选择菜单：在Mozilla中不工作（`undefined`），但在Chrome中工作

Question

我在下拉框中输入<li>数据。 “检查元素”选项显示文本存在，但不显示在下拉列表中。

这是我的html和js代码。

HTML

<h1> 
       <ul class="lev1"> 
        <li> 
         menu-1 
        </li> 
        <li> 
         menu-2 
        </li> 
        <li> 
         menu-3 
        </li> 
        <li> 
         menu-4 
        </li> 
       </ul> 
    </h1> 

     <select id="select2-menu" name="term" class="search_product"> 
      <option> 
       All 
      </option> 
     </select> 

的JavaScript

<script> 
    var ul=document.getElementsByClassName('lev1'); 
     var li = ul[0].getElementsByTagName('li'); 
     var select = document.getElementById('select2-menu'); 

     for (var i = 0; i < li.length; i++) { 
      var option = document.createElement("option"); 
      option.value = li[i].innerText; 
      option.text = li[i].innerText; 
      select.add(option, null); 
      try { 
       select.add(option, null); //Standard 
      } catch (error) { 
       select.add(option); // IE only 
      } 
     } 
    </script> 

Answer 1

试试这个

<script> 
    var ul=document.getElementsByClassName('lev1'); 
      var li = ul[0].getElementsByTagName('li'); 
      var obj = document.getElementById('select2-menu'); 

      for (var i = 0; i < li.length; i++) { 
       var opt = document.createElement("option"); 
       opt.value = li[i].innerHTML; 
       opt.text = li[i].innerHTML; 
       //select.add(option, null); 
       obj.appendChild(opt); 
      } 
</script>