Chosen: 使 optgroup 标签可点击

这将很有用，但标准 html-select 不允许这样做。

@Fr3nzzy ：是的，但如果它是可选的，这不会是一个问题，不是吗？

@Fr3nzzy ：如果可以的话，标准的 html-select 也不允许搜索......但它非常方便，这就是 Chosen 很棒的原因——它改进了标准选择。 我想我们可以在这里应用相同的推理。

@greg0ire ：+1，我也在找这个:o)

@pilap82但是，select 支持通过键入名称来查找项目。

很公平 ：）

也许不是补丁的最佳位置，但我希望它可以帮助：

$( '.chzn-results .group-result' ).each( function () {
    var self      = $( this )
        , options = $( '~li', self )
        , next    = options.filter( '.group-result' ).get( 0 )
    ;
    self.data( 'chzn-options', options.slice( 0, options.index( next ) ) );
} )
.click( function () { 
    $( this ).data( 'chzn-options' ).mouseup()
 } )
.hover( function () { 
    $( this ).data( 'chzn-options' ).addClass( 'highlighted' );
 }, function () { 
    $( this ).data( 'chzn-options' ).removeClass( 'highlighted' );
 } )
.css( { cursor: 'pointer' } );

这是一个好主意。 如果核心团队愿意合并它，我愿意提交拉取请求。 你怎么看@pfiller？

已选择的批量选择示例：

http://vafada.github.com/chosen-dojo/

做得好！

我希望看到它被添加到 Chosen 中，但事件监听应该以不太密集的方式添加。 @adriengibrat的解决方案将一个监听器应用于每个组，如果有数百个组，则效果不佳。 我们已经在搜索结果 div 上有一个点击事件，可以针对选项组进行测试。 如果设置了该选项，则应使用 css 来更改背景颜色。

+1。 我在认为选择OptGroup时，它会（可选）禁用/隐藏所有的孩子。

+1 此功能

@pfiller关于这个或 search_improvements 分支的任何更新？ 很想看到它合并到主人。

我也需要可选择的组。 我最初尝试更改代码 - 然后受到经常提供的答案的启发，即“跳过 optgroup 并添加空格以缩进子项”。 这看起来很糟糕，但是因为 Chosen 是由 CSS 很好地设计的......如何使用非 optgroup select 并在每个选项上使用一个类来使它看起来像一个分组显示？

你可以在这个小提琴中看到一个基本版本： http :

我没有花很多时间研究这种风格，但你会明白的。 这提供了我需要的两个功能——可选择的 optgroups 和可搜索的 optgroups。 所有没有optgroups。

我即将在我的项目中使用这种技术，但我正在寻找反馈。 它似乎有效。 你能想到更好的方法吗？ 或者有什么问题？

_刚刚意识到我可能应该提到 - 小提琴正在使用选择的 Koenpunt 叉，以启用选项添加。 但我认为这不会影响这个例子。_

_我也在寻找指导。 我知道这种技术可能与接近select功能的 Chosen Philosophy 相去甚远——但如果有适合此功能的选项，我很乐意做这项工作。_

+1 此功能，我在寻找支持此功能的方法时发现已选择

（我一直在寻找能够选择组标题或选择组项目）根据上面的 Slothbear

编辑：最后，我模拟了以下操作。
注意这些类，我还在 css 中添加了 .clickable ，它将光标设置为指针。

<select name="category" data-placeholder="Choose a category..." class="chosen-select">
    <option value="group-1 class="group-result clickable">Group Title</option>
    <option value="1" class="group-option">Item Name</option>
    <option value="2" class="group-option">Item Name</option>
</select>

这是我的解决方案。 虽然，它特定于我的需要，但可以轻松地调整它并根据他的需要进行更改。

例子：
汽车
-car1
-car2
-car3
飞机
-平面1
-plane2

我所做的是在所有组的开头创建一个新选项，这样，“全部”选项将在组之后出现：
汽车
-所有汽车
-car1
-car2
-car3
人们
-所有人
-person1
-person2

在 'results_option_build' 中，当数据是一个组时，将 'All' 选项作为第二个参数传递给 'result_add_group'，并在下一次迭代中跳过 'All' 选项：

如果（数据组）{
内容 += this.result_add_group(data, _ref[++_i])

现在，让我们转到 'result_add_group' 并用我们传递的选项替换组，但保留组的样式：
result_add_group = 函数（组，选项）{
.
.
返回 ”

就是这样.. 如果需要，将光标更改为 css 中的指针。

这些似乎都没有考虑到搜索能力。 默认情况下，如果您搜索一个选项，它也会显示组标签。 这种方法没有，如果我有几个组并且它们有相同的选项，这将使它成为这样，所以我最终会得到一个视觉上相同的项目列表。

将其作为一个选项集成到库中会非常有趣，因为这将有助于多选的管理。 您是否在某些版本中提到了挤压？ 一声问候

我只使用 javascript 实现了这个，它是一个临时修复。 不过，我不将它用于多项选择，而是将其用于自定义分组。 我最终使组成为选项但看起来像组，并给出了“组”关键字，当您搜索子选项时，该组将像通常在 selected.js http://stackoverflow 中一样显示。 com/q/22336052/744228

我将此添加到我选择的本地副本中，因为这是我的项目的要求。 最后还是很容易的。

在set_default_values函数中，我将this.group_selectable = this.options.group_selectable != null ? this.options.group_selectable === true : false;放在最后。

然后在result_add_group我将分配给该组的类更改为

if (this.group_selectable) {
        group_el.className = "active-result group-result";
      } else {
        group_el.className = "group-result";
      }
group_el.setAttribute("data-group-array-index", group.array_index);

最后但并非最不重要的是在result_select添加了一些技巧

if (high[0].getAttribute("data-group-array-index")) {
          var that = this;
          high.nextUntil('.group-result').each(function(index, element) {
            that.result_highlight = $(element);
            that.result_select(evt);
          });
        }

就在之前
item = this.results_data[high[0].getAttribute("data-option-array-index")];

在https://gist.github.com/ruhley/9944574查看完整代码

https://gist.github.com/ruhley/9944574#file -chosen-jquery-js-L1005

var itm = that.results_data[element.getAttribute("data-option-array-index")];
if(itm && !itm.selected){
    that.result_highlight = $(element);
    that.result_select(evt);
}

聚会有点晚了，但是：此功能+1！

@ruhley +1 为您的解决方案，就像一个魅力！
只是在完整代码页中但不在代码段中的一个小细节：有一个
别的{
最后不见了。

你好，
谢谢@ruhley的代码。
但是经过您的修改，该组被单击后不会被禁用，可以重新选择。

以下是我的改进（基于所选的 1.4.2）：

• 在第 158 行之后，在“set_default_values”函数中，添加：

this.group_selectable = this.options.group_selectable != null ? this.options.group_selectable === true : false;

_添加参数_

• 将“results_option_build”函数中的第 222 行更改为：

content += this.result_add_group(data, _ref.slice(_i+1, _i+data.children+1));

_将孩子交给“result_add_group”函数。_

• 更改第 272 行，重新定义“result_add_group”函数，使用：

AbstractChosen.prototype.result_add_group = function(group, childrens) {

_为了接收孩子们_

• 在第 285 行（ group_el = document.createElement("li"); ）之后，在“result_add_group”函数中，添加：

if (this.group_selectable) {
  var all = true;
  $.each(childrens, function(index, element) {
    if(!element.selected){
      all = false;
    }
  });
  if(!all) {
    classes.push("active-result");
  } else {
    classes.push("result-selected");
  }
}
group_el.setAttribute("data-group-array-index", group.array_index);

_如果没有选择至少一个孩子，这将使该组可点击。 （由于“all”变量，这部分可以改进）。_

• 在第 1052 行（ high.addClass("result-selected"); ）之后，在“result_select”函数中，添加：

if (high[0].getAttribute("data-group-array-index")) {
  var that = this;
  high.nextUntil('.group-result').each(function(index, element) {
    if($(element).hasClass('active-result')) {
      that.result_highlight = $(element);
      that.result_select(evt); 
    }
  });
} else {

_这只会添加未选中的孩子。_

• 在第 1083 行之后，在“result_select”函数中：

}

_需要关闭点击组的条件。_

不要忘记正确缩进那段代码;)

这是我的文件的完整版本： https :
这是一个差异（1 年可用）： https :
玩得开心

这还没有实施吗？

@GuillaumeSTEIN我试过你的完整版脚本，似乎没有任何变化。
我是否需要向 HTML 添加一些特殊参数或类才能使其工作？
也许你可以在http://codepen.io/或 jsfiddle 上做一个工作示例？

是的，您需要将 option : group_selectable 设置为 true 才能激活此功能

感谢@GuillaumeSTEIN ，它起作用了，但是我从@adriengibrat脚本中想念的是突出显示当前组下的所有选项。

选定的组有一个“结果选定”类。
你可以做一些CSS。 这是我写的内容，您可能需要根据自己的需要进行调整：

 select.form-control + .chosen-container-multi .chosen-results li.result-selected{
     display: list-item;
     color: #ccc;
     cursor: default;
     background-color: white;
 }

我捅了它#2678

这将是一个非常有用的功能！ 我很想看到它实施！

+1 此功能。

如果有人发现这很有用，我会抓住@slothbear jsfiddle 并使用以下方法对其进行改进：

• “全部清除”按钮
• 选择根类别项会禁用和取消选择子项。 为什么 ？ 在我的情况下，我将使用 selected 来生成层次结构过滤器，其中选择父节点意味着将搜索每个子类别，并且我们不希望污染 UI，将每个子节点都选中。

http://jsfiddle.net/Zardoz/pf6dhrbc/6/

我刚刚升级到选定的 1.8.3，以便在选择多项选择的结果后保持打开状态（在 1.7.0 版中添加）。 很棒的功能，很高兴添加了它。 但是，我一直在使用 1.6.1 并使用此处的代码允许在单击组名时添加整个组： http :

直到现在，该代码一直运行良好。 使用 1.8.3 和 hide_results_on_ select:false会导致某些内容中断，并且仅选择当前突出显示的结果选项。 当该行被删除（将其设置回默认值 true，选择时隐藏），它工作正常并选择整个组结果选项。 因此，hide_results_on_ select:false中的某些内容正在破坏/干扰在 .group-result 下收集所有非 .result-selected 的能力。 为了新功能而牺牲这种能力是残酷的。

我将查看上述所有评论，看看这是否已作为新功能的缺陷解决，但我无法确定人们在测试时使用的是哪个版本。

有任何想法吗？

好的。 我受够了。 上周“升级”到 1.8.3 只不过是一场打鼹鼠的游戏。 css 问题、意外活动问题等。我升级以在多选功能上保持结果打开（首先需要数年时间才能实现），但发现它在从结果中选择时总是跳回到顶部，那有什么好处就是这样 - 一切都在等待。 具有多个选项的单个选择的性能以某种方式减慢为爬行。 还有更多问题无法在此列出。 干得好，让这件事持续了这么多年，我很享受。 但是这些改进是以降低用户体验为代价的，我不能这样做。 我正在研究如何拉出 selected 并使用 select2。 现在是 2018 年，是时候找到一个能够满足用户期望的精选工具，而这些期望越来越难以满足。 抱歉，谢谢

我也转向了 select2，但在此之前我没有对 selected 进行转储。 你说“谢谢”的方式很奇怪。

你好，
如果您希望使用 optgroup 并能够单击它并自动添加该组的所有选项，只需将其添加到您的 javascript 中：（事件触发器“.group-result”可能更具限制性）

我确定这可以添加到 AbstractChosen 类，像 AbstractChosen.prototype.optgroup_click = function(evt) ....

$('body').on('click','.group-result',function(){
    // id of select
    var quest=$(this).parent().parent().parent().attr('id');
    quest='#'+quest.substring(0,quest.lastIndexOf('_'));
    // number of optgroup
    var total=$(quest+' optgroup').length;
    // number of group after group-result clicked
    var nb=0;
    $(this).nextAll().each(function(){
        if($(this).hasClass('group-result'))nb++;
    });
    // for clicked group-result, select options in the right select tag by position
    $(quest+' optgroup:nth-of-type('+(total-nb)+')').children().each(function(){
        $(this).prop('selected','selected');
    });
    // update chosen !
    $(quest).trigger('chosen:updated');
});

我使用了 bootstrap-select 并且也在努力寻找能够点击 optgroup 并选择其所有项目的东西 - 这个链接实际上对我有用，希望它有帮助： https ://stackoverflow.com/questions/41821115