CODEWITHSUNDEEP
javascriptjqueryjquery-chosen
Jeremy
Jeremy

Reputation: 1161

Jquery Chosen plugin. Select multiple of the same option

I'm using the chosen plugin to build multiple select input fields. See an example here: http://harvesthq.github.io/chosen/#multiple-select

The default behavior disables an option if it has already been selected. In the example above, if you were to select "Afghanistan", it would be greyed out in the drop-down menu, thus disallowing you from selecting it a second time.

I need to be able to select the same option more than once. Is there any setting in the plugin or manual override I can add that will allow for this?

Upvotes: 1

Views: 5043

Answers (3)

IseNgaRt
IseNgaRt

Reputation: 609

@adam's Answer is working very well but doesn't cover the situation that someone wants to delete some options.

So to have this functionality, alongside with Adam's tweaks you need to add this code too at:

Chosen.prototype.result_deselect = function (pos) {

  var result_data;
  result_data = this.results_data[pos];

// If config duplicates is enabled
        if (this.allows_duplicates) {

            //find fields name
            var $nameField = $(this.form_field).attr('name');
            // search for hidden input with same name and value of the one we are trying to delete
            var $duplicateVals = $('input[type="hidden"][name="' + $nameField + '"][value="' + this.form_field.options[result_data.options_index].value + '"]');

            //if we find one. we delete it and stop the rest of the function
            if ($duplicateVals.length > 0) {

                $duplicateVals[0].remove();
                return true;
            }

        }
....

Upvotes: 2

Adam Denoon
Adam Denoon

Reputation: 329

I created a version of chosen that allows you to select the same item multiple times, and even sends those multiple entries to the server as POST variables. Here's how you can do it (fairly easily, I think):

(Tip: Use a search function in chosen.jquery.js to find these lines)

Change:

this.is_multiple = this.form_field.multiple;

To:

this.is_multiple = this.form_field.multiple;
this.allows_duplicates = this.options.allow_duplicates;

Change:

classes.push("result-selected");

To:

if (this.allows_duplicates) {
  classes.push("active-result");
} else {
  classes.push("result-selected");
}

Change:

this.form_field.options[item.options_index].selected = true;

To:

if (this.allows_duplicates && this.form_field.options[item.options_index].selected == true) {
  $('<input>').attr({type:'hidden',name:this.form_field.name,value:this.form_field.options[item.options_index].value}).appendTo($(this.form_field).parent());
} else {
  this.form_field.options[item.options_index].selected = true;
}

Then, when calling chosen(), make sure to include the allows_duplicates option:

$("mySelect").chosen({allow_duplicates: true})

Upvotes: 3

Soundar
Soundar

Reputation: 2589

For a workaround, use the below code on each selection (in select event) or while popup opened:

$(".chosen-results .result-selected").addClass("active-result").removeClass("result-selected");

The above code removes the result-selected class and added the active-result class on the li items. So each selected item is considered as the active result, now you can select that item again.

Upvotes: 0

Related Questions