如何快速将占位符文本分配给所有尚未选择的选择元素？答案

【问题标题】：How can I quickly assign placeholder text to all select elements that are not already selected?如何快速将占位符文本分配给所有尚未选择的选择元素？
【发布时间】：2014-05-21 10:29:14
【问题描述】：

我希望能够在我的选择输入中指定 HTML5 样式的占位符文本，如下所示：

<select name='blah' placeholder='select one'>

但是，我需要占位符文本不是可选元素，如果选择包含已选择的 <option>，则根本不显示。另一方面，我知道一些浏览器会记住最后的选择，并在页面重新加载时自动跳转到它——这不应该算作已经选择的选项。可以使用 jquery。

【问题讨论】：

标签： javascript jquery html select placeholder

【解决方案1】：

这比看起来容易 - 只需遍历每个选择元素，添加一个只读禁用的选定非显示选项，其中包含选择的占位符属性的文本值......好吧，也许没那么容易！无论如何，这里是如何做到的：

$().ready(function(){
    $('select[placeholder]:not(:has(option[selected]))').each(function(i, o){
        $(o).append($('<option>').
            attr('readonly', 'readonly').
            attr('selected', 'selected').
            attr('disabled', 'disabled').
            css('display', 'none').
            text($(o).attr('placeholder'))
        );
    });
});

· 编辑使用 A. Wolff 建议的更复杂的 css 选择器而不是 if 语句。

【讨论】：

还不够：$('select:not(:has(option))').append(function(){ return $('<option>', {text:$(this).attr('placeholder')}).hide(); });
@A.Wolff 不，隐藏是不够的。在某些浏览器中，隐藏选项仍然可以通过键盘选择，因此必须禁用它。不记得为什么需要只读。

【解决方案2】：

使用Select2:

$("[name='blah']").select2({
    placeholder: "select one",
    allowClear: true
});

【讨论】：