jQuery: Showing a div if a specific a option is selected?

问题

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:

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();
    }         
  });
});

回答2:

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.

回答3:

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.

来源：https://stackoverflow.com/questions/1117603/jquery-showing-a-div-if-a-specific-a-select-option-is-selected

标签

javascript