“select”标签的占位符？

Question

我想知道如何使用 select 标签实现 placeholder 效果，如果有默认选择的选项（例如“请选择一个选项：”），那就太好了。

我尝试了一些变体，但到目前为止它们还没有工作，我确信它可以实现，因为我在某个地方看到过它（不记得在哪里）。

我已经尝试过：

1）

<fieldset>
            <select data-placeholder="Please select a product" id="s1" class="global">
                <option value="Some">Some</option>
                <option value="Slower">Slower</option>
                <option value="Slow">Slow</option>
                <option value="Fast">Fast</option>
                <option value="Faster">Faster</option>
            </select>
</fieldset>

2）

<fieldset>
            <select id="s1" class="global">
                <option data-placeholder="true"  value="Some">Some</option>
                <option value="Slower">Slower</option>
                <option value="Slow">Slow</option>
                <option value="Fast">Fast</option>
                <option value="Faster">Faster</option>
            </select>
</fieldset>

两者都不起作用，也许有一个 jQuery 方法可以做到这一点？

快速编辑：我不想只禁用其中一个选项并将其选中，因为它仍会与其他项目一起显示在下拉列表中。

Answer 1

这里有两种类型的占位符，可重新选择和隐藏：

演示： http://jsfiddle.net/lachlan/FuNmc/

可重新选择占位符：

<select>
    <option value="" selected>Please select</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
</select>

隐藏占位符：

<select class="empty">
    <option value="" selected disabled>Please select</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
</select>

用于更改第一项颜色的 CSS：

select option { color: black; }
select option:first-child { color: grey; }
select.empty { color: grey; }
/* Hidden placeholder */
select option[disabled]:first-child { display: none; }

以及一些用于在选择后切换字体颜色的 jQuery：

// Applies to all select boxes that have no value for their first option
$("select:has(option[value=]:first-child)").on('change', function() {
    $(this).toggleClass("empty", $.inArray($(this).val(), ['', null]) >= 0);
}).trigger('change');

灵感：
https://stackoverflow.com/a/5805194/1196148 - 可重新选择的占位符
https://stackoverflow.com/a/8442831/1196148 - 隐藏占位符

Answer 2

我按照@Truth建议构建了一个简单的演示： http://jsfiddle.net/6QnXF/

(function($){
    $('#myAwesomeSelect').change(function(){
       if( !$(this).data('removedPlaceHolder'))
       {
          $(this).find('option:first').remove();
          $(this).data('removedPlaceHolder', true); 
       }
    });
})(jQuery);

我希望它对你有用。

Answer 3

据我所知，单独使用 HTML 是不可能做到这一点的（尽管那会很好。）
您可以使用选定的选项来伪造它（我知道您不想要它，但这可能是唯一的方法）。选择另一个选项后，您可以将其删除。

这是我所描述内容的一个工作示例。

Answer 4

我的猜测是，您将必须为选择框构建自己的解决方法。类似一系列充当选项的 div，单击时会显示这些选项，并将其值插入到隐藏的输入字段中。

Answer 5

试试这个：
中添加：

select:required:invalid {
 color: #c4c4c4;
}
option[value=""][disabled] {
 display: none;
}
option {
 color: #232423;
}

在 css(样式表):和 HTML

<select required>
 <option value="" disabled selected>Select a color</option>
 <option value="red">Red</option>
 <option value="green">Green</option>