jQuery的选上的插件。 选择同一选项的多个(Jquery Chosen plugin. Se

2019-10-18 21:00发布

我使用的是选择插件来构建多选择输入字段。 这里看一个例子: http://harvesthq.github.io/chosen/#multiple-select

如果已经选择了它的默认行为禁用的选项。 在上面的例子,如果你选择“阿富汗”,它会在下拉菜单中显示为灰色,从而从选择它第二次禁止你。

我需要能够选择相同的选项超过一次。 是否有插件的任何设置或手动控制,我可以添加将允许吗?

Answer 1:

我创建了一个版本的选择,使您可以多次选择相同的项目,甚至将那些多个条目到服务器POST变量。 这里是你如何能做到这一点(很容易,我认为):

(提示:使用搜索功能chosen.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})


Answer 2:

对于一个变通方法,使用上的每个选择下面的代码(在所选择的事件),或者同时打开弹出:

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

上面的代码删除结果选择的类和添加的活性结果类上的立项目。 因此,每个选择的项目被认为是积极的结果,现在你可以再次选择该项目。



Answer 3:

@亚当的回答是工作得很好,但不包括有人想删除一些选项的情况。

所以有这个功能,沿着与亚当的调整需要太在添加以下代码:

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 plugin. Select multiple of the same option