javascript - jQuery Mobile Show/Hide Form input based on select field -

i have following form fields on jquery mobile page. want hide element, , have .show() if user selects option value="other"

here's html:

<div data-role="fieldcontain" class="no-field-separator">         <select name="plan_height" id="plan_height" data-native-menu="false">           <option>plan height</option>           <option value="standard 6foot 2inch">standard 6'2"</option>           <option value="other">specify in notes</option>         </select>       </div>       <div id="specify_plan_height_box" style="display:none;">         <div data-role="fieldcontain" class="ui-hide-label no-field-separator">           <label for="specify_plan_height">specify plan height</label>           <input type="text" id="specify_plan_height" name="specify_plan_height" placeholder="specify plan height" maxlength="50" />         </div>       </div> 

and here's js inside page:

 // $( '#machine-guarding-page' ).live( 'pageinit',function(event) { $( document ).bind( "pageinit", function( event, data ) {     $('#plan_height').change(function() {         var planheightval = $("#plan_height option:selected").val();         var sphb          = $("#specify_plan_height_box");          sphb.hide();         if (planheightval == "other") {             sphb.show();         }     }); });     }); 

it works fine here in working example. need have other $(".page").live('pageinit', function() { @ top of js code make work after page loads? works fine in example link above, not on jquery mobile site.

does work you:

• http://jsfiddle.net/qe6g4/1/
• http://jsfiddle.net/qe6g4/2/ (optimized)
• http://jsfiddle.net/qe6g4/3/ (with input)