javascript - Jquery Chosen plugin. Select multiple of the same option - Stack Overflow

admin管理员组

文章数量:1427340

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

Share Improve this question Follow edited Feb 1, 2014 at 13:19 j0k 22.8k2828 gold badges8181 silver badges9090 bronze badges asked Oct 31, 2013 at 20:57 JeremyJeremy 1,16155 gold badges2020 silver badges3131 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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.

本文标签： javascriptJquery Chosen plugin Select multiple of the same optionStack Overflow