CODEWITHSUNDEEP
javascriptjqueryhtmlcssselect
user2234378
user2234378

Reputation: 1

Setting visibility of select tag based on selection in prior select tag

I want to have my States select dropdown only be visible after a country has been chosen in a prior dropdown.

Here is my code:

<form>
    Name: <input type="text" name="name" autofocus>
    <br />
    E-mail: <input type="text" name="email">
    <br />
    <input type="radio" name="sex" value="male">Male
    <br />
    <input type="radio" name="sex" value="female">Female
    <br />
    <select name="country" onchange="showStates()" id="country">
        <option>Select A Country</option>
        <option id="US" value="US">USA</option>
        <option id="AUS" value="AUS">Australia</option>
    </select>
    <br />
    <select name="State" style="display:none;" id="us-states">
        <option>Select A State</option>
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
    </select>
    <br />
    <select name="State" style="display:none;" id="aus-states">
        <option value="" selected="selected">Select A State</option>
        <option value="TAS">Tasmania</option>
        <option value="QLD">Queensland</option>
        <option value="VIC">Victoria</option>
    </select>
    <br />
    <button type="submit">Submit</button>
    <br />
    <input type="reset" value="Reset">
</form>

Here is the showStates() function:

function showStates() {
    var selected = $('#country :selected').text();

    if (selected == "US") {
        document.getElementByID('us-states').style.display = "block;"; 
    } else {
        document.getElementByID('us-states').style.display = "none;";
    }

    if(selected == "AUS") {
        document.getElementByID('aus-states').style.display = "block;"; 
    } else {
        document.getElementByID('aus-states').style.display = "none;";}
    }
}

I'm finding that the program initially hides the select boxes, but doesn't redraw them when a new option is selected in the country tag.

Upvotes: 0

Views: 1038

Answers (3)

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62488

You can do this way using jQuery:

$('#country').on('change', function() {
    var selected = $(this).val();

    if(selected === "US") {
       $('#us-states').show(); 
    }
    else {
       $('#us-states').hide(); 
    }

    if(selected === "AUS") {
        $('#aus-states').show(); 
    } 
    else {
        $('#aus-states').hide(); 
    }
});
}

Fiddle Example HERE

OR:

$('#country').on('change',function()
{
var selected = $(this).val();

showStates(selected);

});

ShowStates Function:

function  ShowStates(value)
{
    if(value === "US") {
$('#us-states').show(); 
}
else {
$('#us-states').hide(); 
}
if(value === "AUS") {
$('#aus-states').show(); 
} 
else {
$('#aus-states').hide(); 
}
}

Fiddle With Existing Function Reuse

Upvotes: 1

billyonecan
billyonecan

Reputation: 20260

Since you're already using jQuery you can do away with the inline function call. Just add a change handler, and use the value of #country to determine which element to show:

$('#country').on('change', function() {

   var country = this.value.toLowerCase();

   $('select[name="State"]').hide() 
                            .filter('#' + country + '-states') 
                            .show();
});

Here's a fiddle

Upvotes: 2

Sinan Samet
Sinan Samet

Reputation: 6752

How is this?

function showStates(id)
{
$("#"+id).css("display", "block");
}

$("#country").on("change", function(){
    showStates('us-states');
});

http://jsfiddle.net/Lukx8/

Upvotes: 0

Related Questions