CODEWITHSUNDEEP
javascriptjquery
user3258982
user3258982

Reputation: 1

Country / State Javascript

I am after a country select box with a text box below for state and provinces of countries. however, if US or Canada is chosen in the select box, the text box is replaced with a new corresponding select box with either US or Canada state or province options. (depending on the choice)

Basically, If United States is chosen, show a new select with the states... If Canada is chosen, show a new select with Canadian Provinces... If any other country is chosen, just show the text box where they can enter their area.

After bouncing around the site, I have came reasonably close with the code shown below. The Divs display properly, however if I put in a select box in either the United states div or the Canada Div, it breaks it.

So, for this display propose, I just left text in this example so as to have a working example. Any help in finding out why it breaks with a select box inside the US and Canada divs would be greatly 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 your Region:<br><input name="state" type="text"></div>
</body>
</html>

Upvotes: 0

Views: 4557

Answers (4)

kosmosan
kosmosan

Reputation: 373

Another way to do it:

$(document).ready(function(){
    $('select').on('change', function(){

        var with_select = ['ca', 'us'];  // easy to manage values that
                                         // require selects

        var val = $(this).val();         // this kind of things makes it more
                                         // easy

        $('.box').hide();                // hide all boxes. the code runs fast
                                         // enough

        for( var i in with_select ){
            if( with_select[i] == val ){ // we check through the array **if** the   
                $('.' + val).show();     // value matches. in that case we show
                return false;            // the required select and return false 
            }                            // to exit of method
        }

        $('.any').show();                // **else** we show the text input

    });  
});

http://jsfiddle.net/UBf8e/

Upvotes: 0

Mihnea Belcin
Mihnea Belcin

Reputation: 554

i made a fiddle that fixes your code http://jsfiddle.net/DP2n2/1/

first you need to have .change() only 1 time

then you don't need each() on $( "select option:selected")

$( "select option:selected").val() will retrieve the value

and after show() the div with that value like this 

var selectedCountry = $( "select option:selected").val();

 $('.'+selectedCountry).show();

EDIT: updated fiddle http://jsfiddle.net/DP2n2/2/

fixed bug . sry .. 

$('.box').hide(); // outside if()

Upvotes: 0

adeneo
adeneo

Reputation: 318202

It's because your javascript is targeting every single select element on the page.

Use a 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, I just replaced your event handler with two lines !

FIDDLE

Upvotes: 1

samanime
samanime

Reputation: 26547

It's hard to tell without the exact code you were using that broke, but my guess would be because your select events would be hooked up with it, so basically you'd wind up running the change on itself as well, causing unexpected behavior.

If you were to throw the non-working version in to JSFiddle, it'd be easier to play around with and give a more exact answer.

Upvotes: 0

Related Questions