I'm using the chosen plugin to build multiple select input fields. See an example here:

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?

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?

• javascript
• jquery
• jquery-chosen

3 Answers 3

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})

@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;
            }

        }
....

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.