diff --git a/coffee/lib/abstract-chosen.coffee b/coffee/lib/abstract-chosen.coffee index a83c194f826..060695c112a 100644 --- a/coffee/lib/abstract-chosen.coffee +++ b/coffee/lib/abstract-chosen.coffee @@ -309,6 +309,8 @@ class AbstractChosen return false if @is_multiple and (not @display_selected_options and option.selected) return false if not @display_disabled_options and option.disabled return false if option.empty + return false if option.hidden + return false if option.group_array_index? and @results_data[option.group_array_index].hidden return true diff --git a/coffee/lib/select-parser.coffee b/coffee/lib/select-parser.coffee index 86258e3b77a..7bb7e7e2bf2 100644 --- a/coffee/lib/select-parser.coffee +++ b/coffee/lib/select-parser.coffee @@ -18,7 +18,8 @@ class SelectParser label: group.label title: group.title if group.title children: 0 - disabled: group.disabled, + disabled: group.disabled + hidden: group.hidden classes: group.className this.add_option( option, group_position, group.disabled ) for option in group.childNodes @@ -36,6 +37,7 @@ class SelectParser title: option.title if option.title selected: option.selected disabled: if group_disabled is true then group_disabled else option.disabled + hidden: option.hidden group_array_index: group_position group_label: if group_position? then @parsed[group_position].label else null classes: option.className diff --git a/public/index.html b/public/index.html index 913bfd2a311..23cb83d8c74 100644 --- a/public/index.html +++ b/public/index.html @@ -30,7 +30,7 @@

Standard Se
Turns This - + @@ -1173,16 +1173,16 @@

<optgr

-

Selected and Disabled Support

+

Selected, Disabled and Hidden Support

-

Chosen automatically highlights selected options and removes disabled options.

+

Chosen automatically highlights selected options and removes disabled and / or hidden options.

Single Select - + @@ -288,7 +288,7 @@

Standard Se
Into This - + @@ -1197,7 +1197,7 @@

- + @@ -1232,7 +1232,8 @@

D

Chosen automatically sets the default field text ("Choose a country...") by reading the select element's data-placeholder value. If no data-placeholder value is present, it will default to "Select an Option" or "Select Some Options" depending on whether the select is single or multiple. You can change these elements in the plugin js file as you see fit.

<select data-placeholder="Choose a country..." multiple class="chosen-select">
-

Note: on single selects, the first element is assumed to be selected by the browser. To take advantage of the default text support, you will need to include a blank option as the first element of your select list.

+

Note: on single selects, the first element is assumed to be selected by the browser. To take advantage of the default text support, you will need to include a blank option as the first element of your select list - or include an element with the same label as the placeholder and set the hidden, selected and disabled attributes on it for a more graceful degradation on devices Chosen does not support:

+ 
<option value="" selected disabled hidden>Choose a country...</option>

No Results Text Support

diff --git a/public/options.html b/public/options.html index 6a92bead277..b28e3c236b9 100644 --- a/public/options.html +++ b/public/options.html @@ -162,6 +162,7 @@

Example:

<option value="1">Option 1</option> <option value="2" selected>Option 2</option> <option value="3" disabled>Option 3</option> + <option value="4" hidden>Option 4</option> </select> @@ -181,8 +182,8 @@

Example:

The attribute multiple on your select box dictates whether Chosen will render a multiple or single select. - selected, disabled - Chosen automatically highlights selected options and disables disabled options. + selected, disabled, hidden + Chosen automatically highlights selected options, hides hidden options and disables disabled options. diff --git a/spec/jquery/basic.spec.coffee b/spec/jquery/basic.spec.coffee index c71798fbaf0..6e1a640ee50 100644 --- a/spec/jquery/basic.spec.coffee +++ b/spec/jquery/basic.spec.coffee @@ -85,3 +85,37 @@ describe "Basic setup", -> container = div.find(".chosen-container") expect(container.hasClass("chosen-disabled")).toBe true + + it "it should not render hidden options", -> + tmpl = " + + " + div = $("
").html(tmpl) + select = div.find("select") + select.chosen() + container = div.find(".chosen-container") + container.trigger("mousedown") # open the drop + expect(container.find(".active-result").length).toBe 1 + + + it "it should not render hidden optgroups", -> + tmpl = " + + " + div = $("
").html(tmpl) + select = div.find("select") + select.chosen() + container = div.find(".chosen-container") + container.trigger("mousedown") # open the drop + expect(container.find(".group-result").length).toBe 1 + expect(container.find(".active-result").length).toBe 1 diff --git a/spec/proto/basic.spec.coffee b/spec/proto/basic.spec.coffee index 9e7212a57b9..5ddcba78895 100644 --- a/spec/proto/basic.spec.coffee +++ b/spec/proto/basic.spec.coffee @@ -99,3 +99,42 @@ describe "Basic setup", -> container = div.down(".chosen-container") expect(container.hasClassName("chosen-disabled")).toBe true + + it "it should not render hidden options", -> + tmpl = " + + " + div = new Element("div") + document.body.insert(div) + div.update(tmpl) + select = div.down("select") + expect(select).toBeDefined() + new Chosen(select) + container = div.down(".chosen-container") + simulant.fire(container, "mousedown") # open the drop + expect(container.select(".active-result").length).toBe 1 + + it "it should not render hidden optgroups", -> + tmpl = " + + " + div = new Element("div") + document.body.insert(div) + div.update(tmpl) + select = div.down("select") + expect(select).toBeDefined() + new Chosen(select) + container = div.down(".chosen-container") + simulant.fire(container, "mousedown") # open the drop + expect(container.select(".group-result").length).toBe 1 + expect(container.select(".active-result").length).toBe 1