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

Question

我希望能够在我的选择输入中指定HTML5风格的占位符文本，比如：

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

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

Answer 1

这比看起来更容易-只需迭代每个select元素，添加一个只读禁用的selected非显示选项，该选项具有包含select的占位符属性的文本值。。。好吧，也许没那么容易！无论如何，以下是如何做到这一点：

$().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语句。

Answer 2

使用Select2:

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