views:

366

answers:

3

I'm working on the address page for a shopping cart. There are 2 <select> boxes, one for Country, one for Region.

There are 6 standard countries available, or else the user has to select "Other Country". The <option> elements all have a numeric value - Other Country is 241. What I need to do is hide the Region <select> if the user selects Other Country, and also display a textarea.

Any help MUCH appreciated!

+1  A: 

You need to bind a function to the select list so that when it changes, your function decides if the div should be shown. Something like this (untested, hopefully syntactically close). Here's a live example.

$(document).ready( function() {
  $('#YourSelectList').bind('change', function (e) { 
    if( $('#YourSelectList').val() == 241) {
      $('#OtherDiv').show();
    }
    else{
      $('#OtherDiv').hide();
    }         
  });
});
Michael Haren
Legend! This gave me the basic outline, and I was able to figure it out from there. Thanks for your time, and the example you wrote - really appreciate it! :)
A: 

It's the same principle as this question. You just need to connect to the change on the select , check the val() and hide()/show() the div.

seth
Thanks for your input!
A: 

In my opinion, you don't really need jQuery for this.

This simple JavaScript code will do the trick:

document.getElementById('country_id').onchange = function()
{
    if (this.options[this.selectedIndex].value == 241) {
        document.getElementById('region_id').style.display = 'block';
    } else {
        document.getElementById('region_id').style.display = 'none';
    }
}

value works for most browsers, but yes, for older browsers you need select.options[select.selectedIndex].value. I updated my script.

treznik
Value doesn't work on selects.
Darryl Hein
Haven't tested this, as I ended up using the other solution, but appreciate your input - thank you!
That's nearly there--you need to index into the select to get the selected option's value. I agree that if you weren't using jquery, this problem wouldn't be a good reason to start. BUT if you already have jquery on the project, go ahead and use it!
Michael Haren