Jquery code is perfect for me but only works in chrome

Question

So I found this fiddle ( http://jsfiddle.net/EgCW6/ ) in one of the stackoverflow forums and i can't find that forum anymore. I am using the exact code

<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>

This code is perfect solution that I need. However, it only works in chrome. I need to get it t0 work in the other browsers, but I can't seem to find a solution. Either there is not solution or i'm getting dumber to figure this out.

Edit: It should also work when you click on the green box. If there is better and another way to write please do help me. Would Really Appreciate your help.

Answer 1

I adjusted this so the jquery was in the head and didn't load 'ondomready' and i also found that it ran cross-browser using jquery 2.02 (+) but not anything below. There are no errors. I replaced the arrow class with a radial gradient. Here is a fiddle

 $("#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>