javascript - Hide/Show not working in Chrome/Safari -
html part
<select class="input-medium"> <option id="1" value="">select</option> <option id="2" value="">date</option> <option id="3" value="">id</option> </select> <input type="text" class="hide" name="daterange" id="from" value="" data-modal="calendar_modal"> <input type="text" class="hide" name="daterange" id="to" value="" data-modal="calendar_modal" > <input type="text" class="" name="" id="txt" value="">
jquery part
$(document).off("click", "#1").on("click", "#1", function() { $("#from").hide(); $("#to").hide(); }); $(document).off("click", "#2").on("click", "#2", function() { $("#from").show(); $("#to").show(); $("#txt").hide(); }); $(document).off("click", "#3").on("click", "#3", function() { $("#from").hide(); $("#to").hide(); $("#txt").show(); });
the above code works in firefox , ie. not working in chrome , safari.. how fix issue work on browsers.
update
please see fiddle: http://jsfiddle.net/948cn/1/
$(document).ready(function () { $('.input-medium').change(function () { var id = $(this).find('option:selected').attr("id"); $('#from, #to, #txt').hide(); if(id=='2'){ $('#from, #to').show(); }else if(id=='3') { $('#txt').show(); } }); });
Comments
Post a Comment