Simplify jQuery code showing/hiding form fields -
i need show selects in form or hide them depending on previous selected option. think code simple, here javascript:
$(document).ready(function() { $('#a2').hide(); $('#a3').hide(); $('#a5').hide(); $('#a6').hide(); //a8, a9, a11... $('#a1').change(function(){ if($(this).val() == "1"){ $('#a2').show(); $('#a2').focus(); } else $('#a2').hide(); }); $('#a2').change(function(){ if($(this).val() == "1"){ $('#a3').show(); $('#a3').focus(); } else $('#a3').hide(); }); //the same a4, a5, a7... });
and here portion of html:
<select name="a1" id="a1"> <option selected="selected">¿conoce?</option> <option value="1">sí</option> <option value="0">no</option> </select> <select name="a2" id="a2"> <option selected="selected">¿ha usado?</option> <option value="1">sí</option> <option value="0">no</option> </select> <select name="a3" id="a3"> <option selected="selected">¿nota?</option> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="99">ns/nc</option> </select> //the same a4-a6, a7-a9...
what want create function without tons of code... have tested next js doesn't work:
$.fn.validar1 = function(elem) { if(elem.val() == "1"){ elem.next('select').show(); elem.next('select').focus(); } else elem.next('select').hide(); } validar1('#a1');
i know code bad... i'm starting jquery, please, have mercy :o)
this need, if html , js you've shown got:
$(document).ready(function() { $('select').hide(); $('select').change(function(){ if($(this).val() == "1"){ $(this).next().show().focus(); } else $(this).next().hide(); }); });
if won't work, make fiddle
Comments
Post a Comment