4

Here is what I have done: http://jsfiddle.net/cYHae/4/

Here is the code:

// <select> element displays its options on mousedown, not click.
showDropdown = function (element) {
    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window, 0, event.screenX, event.screenY, event.clientX, event.clientY,event.ctrlKey, event.altKey, event.shiftKey, event.metaKey, 0, null);
    element.dispatchEvent(event);
};

// This isn't magic.
window.runThis = function () { 
    var dropdown = document.getElementById('dropdown');
    showDropdown(dropdown);
};

It just does not work in Firefox. Why?

jnbdz
  • 4,863
  • 9
  • 51
  • 93
  • possible duplicate of [Expand select dropdown](http://stackoverflow.com/questions/16056666/expand-select-dropdown) – j08691 Jan 13 '14 at 20:57
  • Their demo does not work either. – jnbdz Jan 13 '14 at 21:02
  • From what I understand, there is no reliable cross-browser way to do this. – j08691 Jan 13 '14 at 21:04
  • Ok but what is FireFox way? – jnbdz Jan 13 '14 at 21:06
  • There might not be a firefox way. I suppose you could try one of those 'hip' dropdown replacements, like select2; they're bound to be less particular about being controlled programmatically. – towr Jan 13 '14 at 21:12
  • It's weird because it works with Opera/Safari/Google Chrome. Why is FireFox blocking? It does not even send an error. – jnbdz Jan 13 '14 at 21:47
  • It is possible Rating-Widget is doing it: http://shopify.rating-widget.com/ – jnbdz Jan 13 '14 at 22:02

1 Answers1

0

Unfortunately you can no longer force open a select tag. My suggestion would be to create an element that acts like a select tag.

Here is an example (I looks a lot better in the full DEMO page):

$(document).ready(function() {
  $('#ts').select2({
    minimumResultsForSearch: -1,
    width: 'resolve'
  });
  $("#click").click(function() {
    $('#ts').select2('open');
  });
});
.page-content{display:table-cell;vertical-align:middle}.wrapper{margin-left:auto;margin-right:auto;width:500px;background:#fff;background:linear-gradient(318deg,#e6f959 0,#16f3ff 100%);padding:3px;border-radius:16px;box-shadow:none;box-shadow:0 0 50px 15px rgba(0,0,0,.3)}.content{width:calc(100% - 16px);border-radius:13px;background:grey;background:rgba(0,0,0,.5);padding:8px}.select-container{display:inline-block;width:75%}.button-container{float:right;width:25%}.page{display:table;position:absolute;top:0;left:0;height:100%;width:100%}body{margin:0;padding:0;font-family:arial;height:100vh;width:100%;background:grey;background:radial-gradient(circle,#393939 0,#000 100%)}select{width:calc(100% - 8px)}button:focus{outline:0}button{font-size:12pt;width:100%;padding:6px;background:#000;color:#fff;background:rgba(0,0,0,.4);border-radius:6px;border:2px solid #000;border:2px solid rgba(0,0,0,.3);font-weight:700}.title{font-size:14pt;color:#fff;font-weight:700}.title-container{padding-bottom:4px}@media only screen and (max-width:550px){.wrapper{width:90%}}
<link href="https://app.jerc.me/test/js-open-select/style.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='page'>
  <div class='page-content'>
    <div class='wrapper'>
      <div class='content'>
        <div class='title-container'>
          <span class='title'>Select a value</span>
        </div>
        <div class='select-container'>
          <select id="ts">
            <option value="1">1</option>
            <option value="2">Lorem ipsum dolor s.</option>
            <option value="3">3</option>
          </select>
        </div>
        <div class='button-container'>
          <button id="click">Open</button>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

I made this using select2.org. This is a much better option than what you are currently trying to do. Sorry for being 7 years late

Full DEMO

Seth B
  • 1,014
  • 7
  • 21