javascript – “select”标签的占位符?

我想知道如何使用选择标签来实现占位符效果,默认选择的选项就像“请选择一个选项”一样真的很好。

我已经尝试了一些变化,他们到目前为止没有工作,我确信它可以实现,因为我看到它在某个地方(不记得在哪里)。

我试过这个:

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方法来做到这一点?

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

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

演示: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');

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

http://stackoverflow.com/questions/8368847/a-placeholder-for-the-select-tag

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript – “select”标签的占位符?