jquery - Country / State Javascript -
i after country select box text box below state , provinces of countries. however, if or canada chosen in select box, text box replaced new corresponding select box either or canada state or province options. (depending on choice)
basically, if united states chosen, show new select states... if canada chosen, show new select canadian provinces... if other country chosen, show text box can enter area.
after bouncing around site, have came reasonably close code shown below. divs display properly, if put in select box in either united states div or canada div, breaks it.
so, display propose, left text in example have working example. in finding out why breaks select box inside , canada divs appreciated.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jquery show hide using selectbox</title> <style type="text/css"></style> <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script> </head> <body> <script type="text/javascript"> $(document).ready(function(){ $("select").change(function(){ $( "select option:selected").each(function(){ if($(this).attr("value")=="ca"){ $(".box").hide(); $(".ca").show(); } else if ($(this).attr("value")=="us"){ $(".box").hide(); $(".us").show(); } else if(($(this).attr("value")!="us") || ($(this).attr("value")=="ca")){ $(".box").hide(); $(".any").show(); } }); }).change(); }); </script> <div> <select> <option>choose country</option> <option value="ca">canada</option> <option value="us">usa</option> <option value="mx">mexico</option> <option value="albania">albania</option> <option value="aruba">aruba</option> </select> </div> <div style="display:none;" class="ca box"><strong>canada province select box...</strong></div> <div style="display:none;" class="us box"><strong>united states state select box</strong></div> <div style="display:none;" class="any box" >enter region:<br><input name="state" type="text"></div> </body> </html>
it's because javascript targeting every single select element on page.
use more unique selector
<select id="country"> <option>cho`enter code here`ose country</option> <option value="ca">canada</option> <option value="us">usa</option> <option value="mx">mexico</option> <option value="albania">albania</option> <option value="aruba">aruba</option> </select>
and target that
$("#country").change(function(){ $(".box").hide(); $("." + this.value).toggle(['ca','us'].indexof(this.value)!=-1); $(".any").toggle(['ca','us'].indexof(this.value)==-1); });
and yes, replaced event handler 2 lines !
Comments
Post a Comment