1

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

如果已选择某个选项，则默认行为会禁用该选项。在上面的示例中，如果您选择“阿富汗”，它会在下拉菜单中显示为灰色，从而不允许您再次选择它。

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

4

3 回答 3

2

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

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

改变：

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选项：

$("mySelect").chosen({allow_duplicates: true})
于 2016-07-09T23:07:00.027 回答
0

对于解决方法，请在每个选择（在选择事件中）或打开弹出窗口时使用以下代码：

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

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

于 2014-01-23T15:40:42.727 回答
0

@adam's Answer 效果很好，但没有涵盖有人想要删除某些选项的情况。

因此，要拥有此功能，以及 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;
            }

        }
....
于 2019-05-17T09:31:13.863 回答