用Javascript模拟点击

我有一个SELECT元素，我正在用下拉列表替换它。我已经成功地从SELECT和child选项元素创建了下拉列表，但是我需要添加一个click事件

此点击事件的内容如下：

如果单击了LI，也请单击相应的选项

这是因为Woocommerce必须有一些JS或PHP，根据选项显示股票状态和可变金额。因此，我假设click事件也会将选项值绑定到表单以添加到购物车

我有这个JS代码：

window.onload = main;
function main(){ 
var select = document.querySelector('.turnintodropdown');
var selsOpts = document.querySelector('.turnintodropdown option');
var selsLi = document.querySelector('.selectOption');
var trigger = document.createElement('a');
var openDropdown = 'dropdownVisible';
var closeDropdown = 'dropdownHidden';

(function addDropdown() {
    if(select) {
        var selsCon = document.createElement('div');
        var selsOuter = document.createElement('ul');
        selsCon.classList.add('selectContainer');
        selsOuter.classList.add('selectOuter');
        select.parentNode.insertBefore(selsCon, select);
        selsCon.appendChild(selsOuter);
        for(var i=0; i<select.length; i++) {
            if(select.childNodes[i].classList.contains('enabled') || select.childNodes[i].innerHTML == '- -'){ // Select First Child and <option> Tags with Enabled Class

                // Create New Elements
                var optsNew = document.createElement('li');
                optsNew.innerHTML = select.childNodes[i].text;
                optsNew.classList.add('selectOption');

                // Set Attributes to New Elements
                if(optsNew.innerHTML !== '- -') {
                    optsNew.setAttribute('value', select.childNodes[i].text);
                }
                else {
                    void(0);
                }

                optsNew.click(clickFunc);

                // Add New LI <option> to UL <container>
                selsOuter.appendChild(optsNew);

                // Click Events
                console.log(select.firstChild);
            }
        }
        var clickFunc = function() {
            select.click();
        };
        select.style.display = 'none';

    }

})();
}

任何帮助都将不胜感激

问候

---

迈克尔

我回答的时间有点长，对不起

该函数最初是从中获取的，没有经过修改，应该可以与大多数旧浏览器一起使用。事实上，我在Firefox/Chrome/Opera/Edge的最新版本上测试成功

处理所有类型事件的版本更为复杂，因为您必须为标准事件创建案例以按类型处理它们，而不是所有的事件都是MouseEvents

它还支持内嵌函数，在html标记中使用onclick=，并且还适用于使用jQuery设置的事件

请注意，如果您希望对旧broswers提供相同的支持，那么还必须区分事件设置的情况，现代addEventListener并非所有人都支持

function fireClick(node){
    if ( document.createEvent ) {
        var evt = document.createEvent('MouseEvents');
        evt.initEvent('click', true, false);
        node.dispatchEvent(evt);    
    } else if( document.createEventObject ) {
        node.fireEvent('onclick') ; 
    } else if (typeof node.onclick == 'function' ) {
        node.onclick(); 
    }
}

例如：

fireClick(document.getElementById("myId"));

---

WordPress有jQuery。商业使用它。那么为什么不使用jQuery呢？首先，这将使它更容易。获取单击的索引并使用它设置Oh的selectedIndex属性，我相信这将使堆更容易。但鉴于我目前正在学习JavaScript，我宁愿在编写其他框架之前更深入地了解vanilla JS。嗨@Andreas，我应该提到我已经尝试过这个，它似乎只显示选项，而不是单击它。@user3436334了解浏览器支持问题等是一个很难的方法，我敢打赌，有一天你会因为这个原因来到这种框架。考虑到这一点，您希望在旧浏览器支持方面走多远？答案将根据这一点略有不同