Question

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

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

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

Answer 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语句。

Answer 2

使用Select2：

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

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

2 个答案: