IE and select elements

Question

Alright, I'm stuck and really hoping for some help as I am at my wits end. I've created a jQuery dialog and within that window, I've created a set of tabs using Bootstrap. On the first tab, I have a small form that has a select element, and this is all tied together with BackboneJS.

<div class="control-group times">
     <label class="control-label" for="inputStart">Time</label>
     <div class="controls">
          <select id="inputStart" name="start">
              {{ slots }}
          </select>
          <label class="control-label small" for="inputEnd">-</label>
          <div class="controls">
              <select id="inputEnd" name="end">
                  {{ slots }}
              </select>
          </div>
     </div>
</div>

On Chrome, the element and all it's associated events work flawlessly.

On Firefox, I have seen it open up, and upon selecting an option just outright refuse to close it's list of options. This issue has literally vanished overnight with no changes to code as far as I can tell.

Now on IE9 & 10, the select field fails after the first use. It allows you to select an option, but if you try again the option will not change. I have found that by clicking off the select, and back on to it it will work, but this is not ideal. Almost as if the select must lose focus before it will be useable again.

These issues are all limited to mouse use. Using a keyboard works perfectly. I recorded the issue in case video works better: Select Fail

Any ideas? Thanks in advance!

Answer 1

After digging around further, I stumbled upon this -- jQueryUI Bug

I upgraded jQueryUI, and so far all problems have vanished.

Answer 2

If you're using Bootstrap, use Bootstrap. The library has at least 2-3 ways to do what you are trying to do. The easiest method is to throw the class form-control on your select list and that should get you cross-browser compatibility.

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Read more here: http://getbootstrap.com/css/#forms