javascript - Changing the placeholder text based on the users choice -

jquery permitted, html-only solution preferred.

i have select box couple of options. when user selects 'name', want placeholder text 'enter name' appear in adjacent text-box.

likewise 'id' -> 'enter id'.

see http://jsfiddle.net/uy9y3/

<select>     <option value="-1">select one</option>     <option value="0">name</option>     <option value="1">id</option> </select> <input type="text"> 

this requirement client haven't been able figure out.

if helps, website using spring framework.

since need update placeholder when select updates, you'll need use javascript it.

you set placeholder display attribute on each option element using html5 data- style attributes. use jquery attach change event listener update placeholder attribute of input box.

note placeholder attribute doesn't have effect in older versions of ie, if need support old ie you'll need polyfill functionality library.

working demo

html

<select id="myselect">     <option data-placeholder="" value="-1">select one</option>     <option data-placeholder="enter name" value="0">name</option>     <option data-placeholder="enter id"  value="1">id</option> </select> <input id="myinput" type="text"> 

jquery

$('#myselect').on('change', function() {     var placeholder = $(this).find(':selected').data('placeholder');     $('#myinput').attr('placeholder', placeholder); });