0

In my example code here:

http://jsfiddle.net/TXPJZ/592/

I have a <select> element with initial text of "Group..." that I only want to show at first. When the user clicks the control I don't want them to be able to select "Group..." as an option. So what I tried was removing the "Group..." option from the array.

This approach works however the initial choice of "Group..." is stuck there unless you click the form then click off in empty space or select a choice other than "All". Also it results in a cloned "Admins" option at the bottom of the list (in Chrome anyways).

Is there a way to make this work or is there another approach I could take? I was thinking of having the form initialize to blank selection and floating a separate text element above it that would say "Group..." which I would hide on click. The problem with that solution is I anticipate that the text will "block" the click from getting through to the dropdown control.

Kyle V.
  • 4,752
  • 9
  • 47
  • 81

1 Answers1

0

if you want the text to not accept clicks, you can set pointer-events: none on that text element, if IE < 11 is not in your support criteria.

There's the possibility of using an optgroup tag that is disabled as well (angular docs for option), similar to this question

Community
  • 1
  • 1
jaf0
  • 1,148
  • 10
  • 20
  • Unfortunately I have to support IE9 at the lowest otherwise I would like to have used pointer-events. I will try optgroup tag to see if it is viable. – Kyle V. Jun 20 '14 at 16:41
  • apparently there's a jQuery polyfill for [pointer-events](https://github.com/kmewhort/pointer_events_polyfill) or you can use the code for IE from this other [post](http://stackoverflow.com/a/4839672/930021) – jaf0 Jun 20 '14 at 16:46