HTML选择列表-如何在jQuery中添加水印? [英] HTML Select List - how to have a watermark with jQuery?

问题描述

好的，这有点使我发疯.我有一个带有下拉菜单的基本HTML页面:

Ok, this is somewhat driving me nuts. I have a basic HTML page with a drop down:

<select id="someDropDown" class="watermarked">
   <option value="">Please Select</option>
   <option>Item 1</option>
   <option>Item 2</option>
</select>

使用此jQuery插件，它说我可以为选择列表添加水印:

Using this jQuery plugin, it says I can watermark a select list:

http://archive.plugins.jquery.com/project/TinyWatermark

这是我的jQuery:

This is my jQuery:

$(document).ready(function() {
    $('.watermarked').watermark('watermark', 'derp');
});

具有这种CSS样式:

.watermark 
{
    color: #999;
}

执行此操作时，下拉列表不再删除，但带有水印...在这里我做错了什么?

When I do this, the dropdown no longer drops, but it is watermarked...what am I doing wrong here?

btw-这在chrome中是无效的，但只有在我双击该元素时才能在IE9中使用.

btw- this is broken in chrome, but works in IE9 only if I double click the element.

推荐答案

我不确定您可以通过选择来做到这一点.如果您观看演示，则全部用于文本输入字段.通常是占位符文本工作的方式.

I'm not sure you can do that with a select. If you look at the demo, it's all for text input fields. That's usually how placeholder text things work.

不过，尝试一下.它禁用了请选择"项，因此当您打开列表时，它是灰色的，您无法再次选择它.但这通常不会改变颜色.

Try this, though. It disables the "Please Select" item so when you open the list, it is gray and you can't select it again. This does not change the color normally though.

<select id="someDropDown" class="watermarked">
   <option disabled selected>Please Select</option>
   <option>Item 1</option>
   <option>Item 2</option>
</select>

jQuery解决方案

确保请选择"选项具有属性"disabled selected"，并且整个选择都具有"gray"类.这将为您在页面上看到的下拉框设置样式，使其具有灰色字体颜色. jQuery代码将遍历未禁用的选项并将其变为黑色.然后，当选择的变化，它会删除类使得下拉框黑(默认)为好.

Make sure the Please Select option has the attributes disabled selected and the entire select has the gray class. This will style the dropdown box as you see it on the page to have a gray font color. The jQuery code will iterate over the non-disabled options and make them black. Then, when the selection changes, it will remove the gray class making the dropdown box black (default) as well.

CSS

.gray {
    color:#ccc;
}

HTML

<select id="someDropDown" class="watermarked gray">
   <option disabled selected>Please Select</option>
   <option>Item 1</option>
   <option>Item 2</option>
</select>

JS

$("#someDropDown option:not([disabled])").css("color", "#000");
$("#someDropDown").change(function() {
    $(this).css('gray');
});

演示

这篇关于HTML选择列表-如何在jQuery中添加水印?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！