Select 来自 JavaScript 的菜单：在 Mozilla 中不起作用（`undefined`），但在 Chrome 中起作用

Question

我把 <li> 数据放在下拉框中。 "Inspect element" 选项显示文本存在但未显示在下拉列表中。

这是我的 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>

Select 来自 JavaScript 的菜单：在 Mozilla 中不起作用（`undefined`），但在 Chrome 中起作用

Select Menu via JavaScript: not working (`undefined`) in Mozilla, but working in Chrome

javascript

mozilla

google-chrome