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

【问题标题】：chosen data-placeholder doesn't display fully for listboxes选择的数据占位符不会完全显示列表框
【发布时间】：2014-02-04 08:48:24
【问题描述】：

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

注意Region 的列表框显示“选择重新”然后它停止...它非常随机地查看运行正常的城市列表框。但是看看国家的列表框，它应该说Select Country...，但它显示Select Country..（缺少最后一个句点）。我的列表框控件的 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');

【问题讨论】：

只是好奇，为什么区域选择模式是多重的？
因为它是一个多选列表框（超过1个值）。
你能链接到这个问题的小提琴或实时页面吗？
在这里工作正常jsfiddle.net/IrvinDominin/B4X8k;你能提供更多的上下文吗？是否在弹出窗口中打开？您在哪个浏览器中遇到问题？您使用的是最新选择的 (1.0) 吗？
我也面临同样的问题...但是一旦我点击它，占位符值就正常显示了。

标签： jquery asp.net jquery-chosen

【解决方案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/

【讨论】：

嗨 Irvin，我注意到的另一件事是所有列表框似乎都有一个 default 类，所以这可以通过 jquery 使用 css 属性轻松解决。 $(".default").css("width", "175px");
@JonH 是的，这是 css 代码中粘贴的第二个解决方案 li.search-field input.default;我认为使用纯 css 更好（没有开销并且默认情况下总是应用），并且尝试使用更严格的选择器会更好，因为选择的 .default 作为类名有点难过
这就是我的答案，尽管我将width: auto !important; 更改为width: 100% !important

【解决方案2】：

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

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

根据自己的喜好使用宽度，在本例中我使用了 175px。

【讨论】：

您可能想要缩小选择器的范围 - .chosen-choices .search-field .default 这样您就不会意外更改页面上的任何其他内容，因为 .default 非常通用。

【解决方案3】：

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

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

documentation
fiddle（适用于 FF 26.0）

我们已经这样做了，但是使用了 css 样式。 ——乔恩

我知道。

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

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

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

【讨论】：

就在这一点上，我发现它不适用于百分比宽度值。例如$('.chosen-select').chosen({ width: '95%' }); 产生了同样的截断问题。

【解决方案4】：

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

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

【讨论】：