为select元素设置占位符

Question

我有一个ZendX_Jquery_Form，我在为一个select元素设置placeHolder时遇到了麻烦。

$month->setAttribs(
        array(
            'required'  =>  TRUE,
            'placeHolder'   =>  'Month'
        ));

我希望它看起来像这样：

但我得到的只是：

在我的firebug输出html看起来像这样

<select id="months_at_residence-lengthMonth" placeholder="Month" required="1" name="months_at_residence[lengthMonth]">

我完全不知道为什么这不起作用。

我需要帮助来设置这个，当我点击它占位符文本隐藏。 只是因为这不能直接使用zend我知道这可以使用js / css完成。如果我用css和javascript做，我怎么能为所有选择元素实现这个？

希望问题很清楚

Answer 1

Placeholders不能与select表单元素一起使用，您应该使用默认值并按如下方式禁用它：

$month->addMultiOption('--', 'Month');
$month->setOptions(array('disable' => array('--')));

这将输出：

<select id="country" name="country" class="valid">
    <option disabled="disabled" label="--" value="--">Month</option>
    <option label="January" value="Jan">January</option>
    <option label="February" value="Feb">February</option>
    // ...
</select>

来自W3Schools的注释：

  

占位符属性适用于以下输入类型：   文本，搜索，网址，电话，电子邮件和密码。

Answer 2

为什么不选择“占位符”文本中的第一个选项？

<select id="choice">
    <option value="0" selected="selected">Choose...</option>
    ...
</select>

请参阅https://stackoverflow.com/a/5805194/435460

Answer 3

你可以通过jquery添加占位符：

  $("#months_at_residence-lengthMonth").attr("placeholder", "Month");

这里建议的解决方案，可以提供帮助：
http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html