Question

今天我在使用Select2插件时遇到了一个看似简单的造型任务，但似乎我想要实现的东西比我想象的要困难。这就是我想要做的事情：

用户应该可以从下拉菜单中选择联系人。每个联系人条目都应显示为联系人的个人资料图片和旁边的一些数据。折叠时，下拉列表应显示所选联系人（即所选联系人的个人资料图片及其旁边的一些数据），旁边有一个“下拉三角形”。在展开状态下，下拉列表还应显示其他联系人，每个联系人都有个人资料图片和数据。简而言之，我想按the select2 example page上的“模板”示例中的描述进行模板化，只是使用更复杂的布局（左侧的轮廓图片以及图片旁边的三个叠加的文本行）。

我设法通过使用formatResult select2选项将所需的样式应用于结果，使用格式化函数将图像和数据包装在样式化的div元素中（请注意，我使用Twitter Bootstrap的'媒体'css类用于样式化）：

function formatContactResult(item) {
 if(!item.id)
    return "No contact selected";

 var contact = JSON.parse(item.text);
 return "<div class='media'><a class='pull-left' href='#'><img style='margin-top: 5px;' class='media-object' data-src='holder.js/64x64' src='" + contact.thumbUrl + "' /></a><div class='media-body' style='font-size: 11px;'><strong>" + contact.displayName + "</strong><br />" + contact.jobTitle + "</div></div>"
};

我的问题：我无法弄清楚如何将这样的复杂布局应用于选择。我知道formatSelection选项，但formatSelection函数的返回值包含在span元素中，该元素不是复杂布局的适当包装器。虽然我知道这是无效的，但我尝试应用上面提到的相同的布局功能，但是这预期导致了奇怪的结果（所需的布局被推到了右边）。

有没有人知道如何用select2实现所描述的布局？

如果有兴趣，我正在使用带有Knockout.js和Twitter Bootstrap的Select2插件。

Answer 1

我明白了 - 问题是div组件中包含的所有select2-choice元素都在select2.css中绝对定位和设置样式：

.select2-container .select2-choice div {
    display: block;
    width: 18px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    [...]
}

此样式用于呈现下拉框的“下拉三角形”，恰好是div元素。不幸的是，三角形div没有自己的CSS类名，应该用它来设置样式。

因此，作为一种解决方法，我创建了一个新的CSS类，并将其应用于我想在div组件内呈现的select2-choice元素。我们的想法是覆盖位置和宽度属性：

.innerDiv {
    position: relative !important; 
    width: auto !important;
}

如何将复杂样式应用于Select2组件的选择？

1 个答案: