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

今天我在使用Select2插件时遇到了一个看似简单的样式设计任务，但我想要实现的事情似乎比我想象的要困难。以下是我想做的：

用户应该能够从下拉菜单中选择联系人。每个联系人条目都应显示为联系人的个人资料图片及其旁边的一些数据。折叠时，下拉列表应显示所选联系人（即所选联系人的个人资料图片及其旁边的一些数据），旁边有一个“下拉三角形”。在展开状态下，下拉列表还应显示其他联系人，每个联系人都有个人资料图片和数据。简单地说，我想按照上的“模板化”示例中所述进行模板化，只是使用更复杂的布局（左侧的配置文件图片加上图片右侧的三行堆叠文本）

通过使用

formatResult

select2选项，我成功地将所需的样式应用于结果，使用了一个格式函数，该函数将图像和数据包装在样式化的div元素中（注意，我使用Twitter引导的“媒体”css类进行样式设置）：

函数格式ContactResult（项）{
如果（！item.id）
返回“未选择联系人”；
var contact=JSON.parse（item.text）；
返回“”+contact.displayName+”
“+contact.jobTitle+”
};

我的问题是：我不知道如何将这样复杂的布局应用到选择中。我知道

formatSelection

选项，但是

formatSelection

函数的返回值被包装在

span

元素中，该元素不是复杂布局的合适包装器。虽然我知道这是无效的，但我尝试应用上面提到的布局函数，但这会导致奇怪的结果（所需的布局被推到了最右边）

有人知道我如何使用select2实现所描述的布局吗

---

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

我想出来了-问题是

Select2-choice

组件中包含的所有

div

元素都在

Select2.css

中进行了绝对定位和样式设置：

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

此样式用于渲染下拉框的“下拉三角形”，它恰好是

div

元素。不幸的是，triangle

div

没有自己的CSS类名，应该用它来设置样式

因此，作为一种解决方法，我创建了一个新的CSS类，并将其应用于

div

元素，我想在

select2choice

组件中呈现这些元素。其思想是覆盖位置和宽度属性：

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

---

顺便问一下，您是否使用select2对文本进行过任何样式设置？我一直在尝试更改font size属性，但即使在编辑CSS之后，我也无法获得select2容器中文本的句柄，该容器以下拉状态显示。有什么建议吗？是的，我已经能够设计文本的样式了。对我来说，它只需添加

字体大小：10px！重要的

到上面提到的

.innerDiv

CSS类。当然，您必须检查您的文本样式是否被任何其他（嵌套）元素覆盖，这些元素也可能具有！重要样式定义或内联样式定义。

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