IronWaffleMan IronWaffleMan - 1 year ago 46
Javascript Question

Is it possible to show all <select> <option>s as a toggle?

This is a bit of a weird request, so I haven't seen any examples for it anywhere. Basically I want to 'unfold' a

so its options are visible, basically turning it into a toggle, of sorts. Here's my original

<span><input type="checkbox" className="onlyCheckbox" value={this.state.only}
onChange={this.handleOnlyChange.bind(this)} />
<label htmlFor="onlyIdentityBox">Only</label>
<select value={this.state.operator} onChange={this.handleOperatorChange.bind(this)} >
<option value="AND">AND</option>
<option value="OR">OR</option>

Ideally the solution would be css-only, but I'm not sure if that's possible (I've searched but not found any examples). Here's an image of what I'd like: example.

Is this doable?
edit: added context for the
's surrounding elements.

Answer Source

To do this with a select box is rather..... odd. But sure it can be done. This should be enough to get you started:

.toggle option{
<select size='2' class='toggle'>
  <option value="AND" selected>AND</option>
  <option value="OR">OR</option>