Question

我正在使用所选插件来构建多个选择输入字段。请在此处查看示例：http://harvesthq.github.io/chosen/#multiple-select

默认行为会禁用选项（如果已选中）。在上面的示例中，如果您选择“阿富汗”，它将在下拉菜单中显示为灰色，从而禁止您再次选择它。

我需要能够多次选择相同的选项。插件或手动覆盖中是否有任何设置我可以添加以允许这个？

Answer 1

我创建了一个选择版本，允许您多次选择相同的项目，甚至将这些多个条目作为POST变量发送到服务器。这是你如何做到的（我认为相当容易）：

（提示：使用selected.jquery.js中的搜索功能查找这些行）

变化：

'\0'

要：

this.is_multiple = this.form_field.multiple;

变化：

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

要：

classes.push("result-selected");

变化：

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

要：

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

然后，在致电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; }时，请确保包含chosen()选项：

allows_duplicates

Answer 2

要获得解决方法，请在每个选项（在select事件中）或弹出窗口中使用以下代码：

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

以上代码删除了结果选择的类，并在li项目中添加了 active-result 类。因此，每个选定的项目都被视为活动结果，现在您可以再次选择该项目。

Answer 3

@adam的答案运行得很好，但没有涵盖有人要删除某些选项的情况。

因此，要具有此功能以及亚当的调整，还需要在以下位置添加此代码：

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

        }
....

Jquery Chosen插件。选择相同选项的多个

3 个答案: