Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Feature: Locked Items #503

Merged
merged 3 commits into from

8 participants

@todd-givainc

Per our discussion previously, I've renamed disabled to locked instead.

An example of the code/feature can be found here:
http://jsfiddle.net/5wCDM/

@ivaynberg
Owner

will merge this when i have time to also update the docs with an example and the description. if you have time to do that in gh-pages branch would be great....

@ivaynberg ivaynberg merged commit 4a363c4 into select2:master
@aj7

how would the lock work if i am loading my items dynamically, and not in javascript?

@kevin-brown
Owner

For Ajax, in the results you would include a locked property for each value which would be either true or false.

@webRat

Kevin is correct. The ajax would return { id: 1, text: 'blah', locked: true } and IF the user selected it, they won't be able to remove it ( fair warning! :D )

@aj7
@webRat

Not sure, I believe this feature is only for multi: yes - I believe you can pass the disabled="disabled" on a regular single select. I believe select2 honors the disabled attribute of a single select drop down.

@kevin-brown
Owner

Locked items don't work with <select multiple> at the moment, it only works with <input type="hidden">.

One option would be to turn this into a function, with parameters similar to formatResult or formatSelection, that allows the user to create their own function to determine what is locked. The current implementation would be kept as the default function in that case.

@webRat

After re-reading documentation, select2 does support <select multiple> and Kevin is correct. I'll take a poke at my feature sometime and see if I can get it working with <select muliptle> with an attribute or something (example: <option value="whatever" locked>whatever</option> Not sure if that would be the best way to go about it though and Kevin's suggestion might be faster.

@aj7

Thanks to both - just to add something here - I would think that the lock feature should apply mainly to a multiple select, as one would want to lock an item in a list (multiple select, and not a single select)....
my scenario is such that I want some items to appear by default at initialisation time/start time, and these items be locked, so they cannot be removed by the user i.e. there is always a default selection, and then if someone selects from the list, then the locked item gets deselected programmatically...

@dswitzer

@aj7:

This was the was the reason the locked property was added--so that some defaults could be put in that can not be removed. I don't think it's particular useful for normal selections, just for selections you want to load as defaults.

@webRat:

I'd recommend using the attribute "data-locked" as the attribute to pass in the locked status via the element.

@WindBridges

Hi, guys. Is there any chance that "data-locked" attribute will be implemented? I need functionality like "locked: true", but statically, without scripting. My situation: user only can add new items to multiselect, but never can remove already added. So I must show which items are already added, but must not allow to remove it. All HTML with and is generated at server side.

@natorojr

As far as I can tell from looking at the 3.4.0 source code, you can specify locked on an HTML option element as follows:

<option value="1" selected="selected" locked="locked">United States</option>

This works. However, it leads to invalid HTML5.

As suggested by @dswitzer and @WindBridges, using a data-locked attribute would be more appropriate.

Line 776 of select2.js could be changed as follows:

--- docroot/vendor/select2/3.4.0/select2.js 2013-05-14 08:27:46.000000000 -0700
+++ docroot/vendor/select2/3.4.0.HACKED/select2.js  2013-06-23 16:52:28.636936609 -0700
@@ -773,7 +773,7 @@
                     element: element.get(),
                     css: element.attr("class"),
                     disabled: element.prop("disabled"),
-                    locked: equal(element.attr("locked"), "locked")
+                    locked: (equal(element.attr("locked"), "locked") || equal(element.attr("data-locked"), "true") || equal(element.data("locked"), true))
                 };
             } else if (element.is("optgroup")) {
                 return {

Then you could change the HTML option as follows:

<option value="1" selected="selected" data-locked="true">TOTAL US - XAOC</option>

I only performed limited testing, but it seemed to work nicely in Chrome and Firefox.

Could one of the devs on the project verify and merge?

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Oct 16, 2012
  1. @todd-givainc

    Create locked items that can't be removed.

    todd-givainc authored
    This patch creates multi select items that can't be removed.
  2. @todd-givainc

    Added .select2-locked

    todd-givainc authored
  3. @todd-givainc
This page is out of date. Refresh to see the latest.
Showing with 33 additions and 21 deletions.
  1. +4 −0 select2.css
  2. +29 −21 select2.js
View
4 select2.css
@@ -410,6 +410,10 @@ disabled look for already selected choices in the results dropdown
background-image: linear-gradient(top, #eeeeee 1%, #ffffff 15%);
}
+.select2-locked {
+ padding: 3px 5px 3px 5px !important;
+}
+
.select2-container-multi .select2-choices {
min-height: 26px;
}
View
50 select2.js
@@ -1838,7 +1838,7 @@ the specific language governing permissions and limitations under the Apache Lic
return;
}
- choices = selection.find(".select2-search-choice");
+ choices = selection.find(".select2-search-choice:not(.select2-locked)");
if (choices.length > 0) {
choices.last().addClass("select2-search-choice-focus");
}
@@ -2069,38 +2069,46 @@ the specific language governing permissions and limitations under the Apache Lic
this.focusSearch();
},
- // multi
addSelectedChoice: function (data) {
- var choice=$(
+ var enableChoice = !data.locked,
+ enabledItem = $(
"<li class='select2-search-choice'>" +
" <div></div>" +
- " <a href='javascript:void(0)' onclick='return false;' class='select2-search-choice-close' tabindex='-1'></a>" +
+ " <a href='#' onclick='return false;' class='select2-search-choice-close' tabindex='-1'></a>" +
"</li>"),
+ disabledItem = $(
+ "<li class='select2-search-choice select2-locked'>" +
+ "<div></div>" +
+ "</li>");
+ var choice = enableChoice ? enabledItem : disabledItem,
id = this.id(data),
val = this.getVal(),
formatted;
-
+
formatted=this.opts.formatSelection(data, choice.find("div"));
if (formatted != undefined) {
choice.find("div").replaceWith("<div>"+this.opts.escapeMarkup(formatted)+"</div>");
}
- choice.find(".select2-search-choice-close")
- .bind("mousedown", killEvent)
- .bind("click dblclick", this.bind(function (e) {
- if (!this.enabled) return;
- $(e.target).closest(".select2-search-choice").fadeOut('fast', this.bind(function(){
- this.unselect($(e.target));
- this.selection.find(".select2-search-choice-focus").removeClass("select2-search-choice-focus");
- this.close();
- this.focusSearch();
- })).dequeue();
- killEvent(e);
- })).bind("focus", this.bind(function () {
- if (!this.enabled) return;
- this.container.addClass("select2-container-active");
- this.dropdown.addClass("select2-drop-active");
- }));
+ if(enableChoice){
+ choice.find(".select2-search-choice-close")
+ .bind("mousedown", killEvent)
+ .bind("click dblclick", this.bind(function (e) {
+ if (!this.enabled) return;
+
+ $(e.target).closest(".select2-search-choice").fadeOut('fast', this.bind(function(){
+ this.unselect($(e.target));
+ this.selection.find(".select2-search-choice-focus").removeClass("select2-search-choice-focus");
+ this.close();
+ this.focusSearch();
+ })).dequeue();
+ killEvent(e);
+ })).bind("focus", this.bind(function () {
+ if (!this.enabled) return;
+ this.container.addClass("select2-container-active");
+ this.dropdown.addClass("select2-drop-active");
+ }));
+ }
choice.data("select2-data", data);
choice.insertBefore(this.searchContainer);
Something went wrong with that request. Please try again.