`select`标签的占位符?
我想知道如何使用select
标签实现placeholder
效果,如果select
默认选项,请选择“请选择选项:”。
我已经尝试了一些变化,他们到目前为止还没有工作,我确信它可以实现,因为我在某处看到它(不记得在哪里)。
我试过这个:
1)
2)
两者都不起作用,也许有一个jQuery方法来做到这一点?
快速编辑:我不想只禁用其中一个选项并将其selected
因为它仍然会在下拉列表中显示其他项目。
这里有两种类型的占位符,可重新选择和隐藏:
演示: http : //jsfiddle.net/lachlan/FuNmc/
可重新选择的占位符:
隐藏占位符:
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 – 隐藏占位符
我按照@Truth建议构建了一个简单的演示: http : //jsfiddle.net/6QnXF/
(function($){ $('#myAwesomeSelect').change(function(){ if( !$(this).data('removedPlaceHolder')) { $(this).find('option:first').remove(); $(this).data('removedPlaceHolder', true); } }); })(jQuery);
我希望这个对你有用。
据我所知,单凭HTML无法做到这一点(虽然这样会很好。)你可以用选择的选项伪造它(我知道你不想要它,但它可能是唯一的方法)。 选择其他选项后,您可以将其删除。
这是我描述的一个有效例子。
我的猜测是你必须为选择框构建自己的解决方法。 类似于一系列div的东西,它们作为选项显示在点击时显示并将其值插入隐藏的输入字段。