On: Make Better Select Boxes with Chosen

[PStamatiou]

We've been using this for what feels like 9 months with Picplum. One thing we did is for on select menus with few items, we hide the search box:

  $(".recipient_relation").chosen disable_search_threshold: 10

And if in Backbone you'd like to have it preselect the value, run something like this after render (so you don't have to add much logic to your handlebar template for the markup):

@$("#address_country_field option").each -> $(@).attr "selected", "selected" if self.model.get("address_country") is $(@).val()

It'd be nice to see some folks share their menu styles. The gradient on the select doesn't quite fit in with all site styles.

[smcguinness → PStamatiou]

Is the element you are binding chosen to visible from the start? I'm finding that chosen does not like to be bound to an element until it is visible.

I tend to do a lot of setup on render of fields that are hidden and displayed later in the same view, but chosen throws an error on 'searchfield[0]'.

[PStamatiou → smcguinness]

Correct, it's called after render puts the view into the DOM

[nailer → PStamatiou]

FYI, I had to go finding this the other day - it's tricky as mousing out removes the class. Anyway, it's:

    .chzn-container .chzn-results .highlighted

[qeorge → nailer]

Leaving this here in case it helps someone:

In Firebug, you can ask the :hover state to stay active.

    1. HTML tab
    2. Click on the element
    3. Style menu on the right panel
    4. choose :hover

It tricks the browser into thinking the mouse is really over the element (i.e., it doesn't just add :hover), so if you have a hover class added via JS that should work too.

(Apparently this feature has been there for a long time, but I only found it recently. Changed my Firebug life.)

[icoloma → qeorge]

There is an icon to do the same in the CSS tab of chrome inspector

[sbarre → qeorge]

Thank you very much for showing me this! I can't vote you enough.

[PStamatiou → nailer]

Yeah I remember hunting that as well some time ago