所选的数据占位符不会完全显示列表框

Question

我有一个asp.net列表框，我正在使用jquery chosen plugin。 数据占位符值似乎并不总是与列表框一起使用。 例如，见图像：

请注意Region的列表框，其中显示“Select Re”然后它会停止...它非常随机地查看工作正常的城市列表框。但请查看国家/地区列表框Select Country...，但显示Select Country..（错过最后一个时段）。我的listbox控件的asp.net标记是这样的：

<asp:ListBox ID="lbRegion" AutoPostBack="true" runat="server" class="chosen-select"
             data-placeholder="Select Region..." SelectionMode="Multiple"
             OnSelectedIndexChanged="lbRegion_OnSelectedIndexChanged" ToolTip="Select Region...">
</asp:ListBox>

我尝试重新创建它等等......但无济于事。是什么赋予了？

这是我的jquery，包括所选的类：

$(".chosen-select").chosen({
            search_contains: true,
            no_results_text: "Oops, nothing found!",
            allow_single_deselect: true
        });
        $('.chosen-container').css('width', '200px');

Answer 1

此处转载Select Country..的问题：http://jsfiddle.net/D3FUc/，我会深入探究问题的原因。

我发现的唯一的事情是覆盖特定的容器类，如：

li.search-field {
    width: 100%;
}
li.search-field input.default {
    width: auto !important;
}

问题：https://github.com/harvesthq/chosen/issues/1162#issuecomment-30229366

演示：http://jsfiddle.net/D3FUc/1/

Answer 2

我注意到页面上的每个列表框都被赋予了类default。我不是说这是一个明确的答案，但它是一种解决方法。只需将其添加到您的jquery：

$(".default").css("width", "175px");

根据自己的喜好使用宽度，在这种情况下，我使用了175px。

Answer 3

在初始化选项中明确设置宽度似乎可以解决Irvin's example上的问题：

$('.chosen-select').chosen({ width: '200px' });

• documentation
• fiddle（适用于FF 26.0）

---

  

我们已经这样做但使用了css风格。 - JonH

我知道。

不知何故，chosen计算占位符标签的长度，并将其分配到style属性的标签标记中。
我不知道在内部渲染中这个长度的计算点是什么，而是从测试显示的内容：

• 如果您只有css规则，则第一次显示的长度不正确
• 如果您将宽度作为显式选项传递，另一方面，长度是正确的。

我的盲目猜测是：选择占位符的宽度是在尚未达到其最终值的位置读取的 - 可能在它插入DOM的最终位置之前，因此在css规则适用之前。

Answer 4

css解决方案会更改选择框的外观，因此我不想使用它。在显示所选内容后，我设法通过调用以下内容来解决此问题。

//to fix placeholder in chosen
$('select').trigger('chosen:updated')