我想知道如何使用placeholder
标记实现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方法可以做到这一点?
快速修改:我不想只禁用其中一个选项并将其设为selected
,因为它仍会在下拉列表中显示其他项目。
答案 0 :(得分:26)
这里有两种类型的占位符,可重新选择和隐藏:
演示: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 - 隐藏占位符
答案 1 :(得分:4)
我按照@Truth建议建立了一个简单的演示:http://jsfiddle.net/6QnXF/
(function($){
$('#myAwesomeSelect').change(function(){
if( !$(this).data('removedPlaceHolder'))
{
$(this).find('option:first').remove();
$(this).data('removedPlaceHolder', true);
}
});
})(jQuery);
我希望它适合你。
答案 2 :(得分:2)
据我所知,单凭HTML无法做到这一点(虽然这样会很好。) 您可以使用选定的选项伪造它(我知道您不想要它,但它可能是唯一的方法)。选择其他选项后,您可以将其删除。
答案 3 :(得分:0)
我的猜测是,您将不得不为选择框构建自己的解决方法。类似于一系列div的东西,它们作为选项显示在点击时显示并将其值插入隐藏的输入字段。