SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show/Hide jQuery

    Using jQuery, the hide show part is easy.

    I need to show or hide a single section of a form based on the value of a select box. More specifically, if the select box is one of 30 countries, then show, else hide.

    What's the easiest way to handle this?

    Thanks

  2. #2
    SitePoint Evangelist speda1's Avatar
    Join Date
    Jan 2002
    Posts
    550
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mclamais View Post
    Using jQuery, the hide show part is easy.

    I need to show or hide a single section of a form based on the value of a select box. More specifically, if the select box is one of 30 countries, then show, else hide.

    What's the easiest way to handle this?

    Thanks
    Put a display:none on what you want to hide by default. Then trigger the .show() with an onclick event on the select box.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by speda1 View Post
    Put a display:none on what you want to hide by default. Then trigger the .show() with an onclick event on the select box.
    More specifically, use scripting to hide what you want hidden by default.

    If instead you use CSS to hide them, they will be completely invisible to non-scripting users of your page.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know what I need to do, it's the doing, that is the problem.

    This is what I have thus far

    jQuery(document).ready(function(){

    var optCountries = ["Austria", "Belgium", "Bulgaria", "Cyprus", "Czech Republic", "Denmark", "Estonia",
    "Finland", "France", "French Guiana", "French Southern Territories", "Germany",
    "Greece", "Hungary", "Ireland", "Isle of Man", "Italy", "Latvia", "Lithuania",
    "Luxembourg", "Malta", "Netherlands", "Netherlands Antilles", "Poland", "Portugal",
    "Romania", "Slovakia", "Slovenia", "Spain", "Sweden", "United Kingdom"];

    var objCountry = $.makeArray(optCountries);

    if($.inArray("Belgium", objCountry) > -1) $("#opt-section").show();

    });

    So how do I get the value of a select box called hqCountry in the if statement above where "Belgium" is, and get it to kick off with onchange?

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mclamais View Post
    So how do I get the value of a select box called hqCountry in the if statement above where "Belgium" is, and get it to kick off with onchange?
    One way is to use an attribute selector:

    Code javascript:
    $('select').filter('[name="hqCountry"]').change(function () {
        ...
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •