jQuery Chosen 插件：自定义/格式化选择中的选项文本答案

【问题标题】：jQuery Chosen plugin: customize/format text of option in selectjQuery Chosen 插件：自定义/格式化选择中的选项文本
【发布时间】：2012-05-24 09:45:19
【问题描述】：

我在 jquery 中使用了一个名为 selected 的插件，用于具有自动完成功能的选择框。 http://harvesthq.github.com/chosen/

在哪里可以格式化选择框中的选项文本？

在选择的插件中有一个方法吗？我已经阅读了文档并扫描了代码，但似乎找不到。

这是我想要实现的屏幕截图。（这是用另一个插件'selectmenu'制作的，但我想用'chosen'做同样的事情）

【问题讨论】：

标签： jquery drop-down-menu jquery-chosen

【解决方案1】：

目前master分支没有这个功能。

但是有这个 pull-request，这就是你所需要的（目前它仅适用于 jquery）： https://github.com/harvesthq/chosen/pull/692

所以你可以从这里获取代码。 https://github.com/cjstewart88/chosen/tree/templates

【讨论】：

【解决方案2】：

现在还有另一种方法...

您可以添加特殊字符，这些字符在正常选择中看起来还不错，但通常不会出现在文本中。例如TITLE :: Description。然后找到:: 并使用它进行格式化。此示例专为单选而设计。对于多个，您可能只需要更改.chosen-single，或使用其他方式来选择它。

$('select[name="SELECT_NAME"]')
    .chosen({search_contains: true})
    .add('.chosen-search')
    .on('chosen:showing_dropdown keyup change', function() {
    $('.chosen-results .active-result, .chosen-single span').html(function() {
        var html = $(this).html();
        if (/ :: /.test(html)) {
            return '<strong>' + html.replace(' :: ', '</strong> <span style="font-size:70%;display:inline;font-weight: normal;">') + '</span>';
        } else {
            return html;
        }
    });
});

你在这个例子中的结果应该是<strong>Title</strong> <span style="font-size:70%;display:inline;font-weight: normal;">Description</span>

【讨论】：

【解决方案3】：

您可以将宽度作为参数添加到选择

$("field").chosen({ width: '400px' })

【讨论】：