Question

我已经通过JavaScript自定义了选项菜单，但是存在问题，当禁用选项标记或选择为true时，此代码无效。

我想用JavaScript解决这个问题。

<form class="wrapper" action="index.html">
    <ul>
        <li>
            <div class="magneto-combobox">
                <select class="combo-box" data-element="combobox">
                    <option value="apple" disabled>apple</option>
                    <option value="mango">mango<option>
                    <option value="banana" >banana<option>
                </select>
            </div>
        </li>
        <lil>
            <input type="submit" value="submit"/>
        </lil>
    </ul>
</form>

<script>
    var select = document.getElementsByTagName('select');
    var customselect = [];
    var menu = [];
    var items = [];
    for(var i = 0 ; i < select.length ; i++) {
        if(select[i].getAttribute("data-element") == "combobox") {
            option = select[i].getElementsByTagName('option');
            menu[i] = document.createElement('ul');
            customselect[i] = document.createElement('div');
            customselect[i].className = select[i].className;
            select[i].parentNode.appendChild(customselect[i]);
            select[i].parentNode.appendChild(menu[i]);
            for(var j = 0 ; j < option.length; j++) {
                items[j] = document.createElement('li');
                menu[i].appendChild(items[j]);
                menu[i].childNodes[j].innerText = option[j].value;
                menu[i].previousSibling.innerText = option[0].value;
                option[j].selected = true;
                if(!select[i].getAttribute('disabled')) {
                    items[j].onmousedown =  itemSelected;
                }
            }
        }
    }
    function itemSelected() {
        var prevsibling = this.parentNode.previousSibling;
        var firstchild = this.parentNode.parentNode.firstChild;
        var option = firstchild.getElementsByTagName('option');
        prevsibling.innerText = this.innerText;
        firstchild.value = prevsibling.innerText;
        document.getElementById('demo').innerText = firstchild.value;
    }
</script>

Answer 1

您的<option>代码未使用匹配的</option>代码正确关闭。

你的代码应该是：

                  <option value="apple" disabled>apple</option>
                  <option value="mango">mango</option>
                  <option value="banana">banana</option>

禁用和选中不在自定义选择选项菜单（Javascript）中工作

1 个答案: