jQuery代碼對我來說很完美，但僅適用於Chrome

Question

因此，我在一個stackoverflow論壇中找到了這個提琴（ http://jsfiddle.net/EgCW6/ ），但我再也找不到該論壇了。 我正在使用確切的代碼

<div class="lang"> 
  <select id="language" class="selectOptionHeader">
                            <option>United Kingdom</option>
                          <option>Austria</option>
                          <option>Romania</option>
                     </select>
                </div>
<script>
                $(".lang").append("<div onclick='runThis2()' class='arrow2'></div>");

                (function () {
                    showDropdown = function (element) {
                        var event;
                        event = document.createEvent('MouseEvents');
                        event.initMouseEvent('mousedown', true, true, window);
                        element.dispatchEvent(event);
                    };
                    window.runThis2 = function () {
                        var dropdown = document.getElementById('language');
                        showDropdown(dropdown);
                    };
                 })();
                </script>

這段代碼是我需要的完美解決方案。 但是，它僅適用於chrome。 我需要讓它在其他瀏覽器中正常工作，但似乎找不到解決方案。 要么沒有解決方案，要么我變得笨拙地弄清楚了。

編輯：當您單擊綠色框時，它也應該起作用。 如果有更好的另一種書寫方式，請幫助我。 會很感激您的幫助。

Answer 1

我對此進行了調整，以使jquery處於頭部，並且不加載“ ondomready”，並且我還發現它使用jquery 2.02（+）運行跨瀏覽器，但下面沒有任何內容。 沒有錯誤。 我用徑向漸變替換了箭頭類。 這是一個小提琴

 $("#dropdown").click(function() { showDropdown = function(element) { var event; event = document.createEvent('MouseEvents'); event.initMouseEvent('mousedown', true, true, window); element.dispatchEvent(event); }; window.runThis1 = function() { var dropdown = document.getElementById('dropdown'); showDropdown(dropdown); }; window.runThis2 = function() { var dropdown = document.getElementById('dropdown2'); showDropdown(dropdown); }; }); 

 .drop { float: left; width: 180px; height: 34px; overflow: hidden; background-color: #D0D0D0; background-image: url(http://www.msskincarebeautysalon.com/images/downArrow.png), -webkit-radial-gradient(top left, circle, rgba(192, 192, 192, 0.3) 80%, rgba(0, 255, 0, 0.5) 20%); background-image: url(http://www.msskincarebeautysalon.com/images/downArrow.png), -moz-radial-gradient(top left, circle, rgba(192, 192, 192, 0.3) 80%, rgba(0, 255, 0, 0.5) 20%); background-image: url(http://www.msskincarebeautysalon.com/images/downArrow.png), -ms-radial-gradient(top left, circle, rgba(192, 192, 192, 0.3) 80%, rgba(0, 255, 0, 0.5) 20%); background-image: url(http://www.msskincarebeautysalon.com/images/downArrow.png), -o-radial-gradient(80% 20%, circle, rgba(192, 192, 192, 0.3), rgba(0, 255, 0, 0.5)); background-image: url(http://www.msskincarebeautysalon.com/images/downArrow.png), radial-gradient(top left, circle, rgba(192, 192, 192, 0.3) 80%, rgba(0, 255, 0, 0.5) 20%); background-repeat: no-repeat, repeat; background-position: right center; height: auto; border-radius: 4px; border:1px solid #000; box-shadow: 0 1px 3px #f00; font-size:14px; margin:0 10px; position:relative; } .drop select { background: transparent; width: 100%; padding: 5px; font-size: 14px; border: 0; border-radius: 0; height: 34px; -webkit-appearance: none; color: #f00; cursor: pointer; } .drop option { text-align: center; margin: 0 auto; color: #000; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <div class="drop"> <select id="dropdown"> <option value="categ1">Category1</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> </select> </div> <div class="drop"> <select id="dropdown2"> <option value="categ1">Category1</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> </select> </div>