Question

I have a ZendX_Jquery_Form where I am having a trouble setting placeHolder for a select Element.

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

I wanted it too look like this:

but all I am getting is thi:

On my firebug output html looks like this

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

I have absolutely no idea why this is not working.

I need help to set this such that when i click on it placeholder text hides.
Just incase this dont work straight using zend I know this can be done using js/css . If I do it with css and javascript how can I achieve this for all select elements ?

Hope the question was clear enough

Answer 1

Placeholders don’t work with select form element, what you should do instead is to use a default value and disable it as follows:

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

This will output:

<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>

Note from W3Schools:

The placeholder attribute works with the following input types:
text, search, url, tel, email, and password.