Grow your CSS skills. Land your dream job.

Question about show/hide on drop down selection with jQuery

  • # October 8, 2008 at 7:38 am

    My goal is to hide a class (optional-field) when the page loads. But if the user selects a certain choice (total of two choices), then the hidden classes will show.

    I was able to hide the classes (optional-field) when the page loads, but I can’t for the life of me, get them to show when I select the right choice. (Below is the code) . NOTE: the this is dynamically created by PHP, so the [{VAL_OPTION_ID}] in productOptions[{VAL_OPTION_ID}] in the HTML is the PHP place holder. I did put up what it looks like after generated when the page loads as well below.

    Besides not getting the class "optional-field" to show() when you select the option "Me" from the drop down, I had a couple other questions:
    1) I found how to specify a ID or Class "." or "#" in your code, but not if the <select> uses "name" selector.

    2) Also, I had to add a class to the <select> because I couldn’t find how to identify it based on a "name" selector in the <select> tag.

    3) Also, I tried putting an alert(send_type) to see what value send_type was after it was declared, but couldn’t get any response back.

    jQuery

    Code:
    jQuery.noConflict();
    jQuery(document).ready(function(){
    jQuery(“.optional-field”).hide();

    jQuery(“.productOptions[2]“).change(function() {
    var send_type = jQuery(“.productOptions[2] option:selected”).text();

    if (send_type == ‘ Me ‘) {
    jQuery(“.optional-field”).hide();
    };

    if (send_type == ‘Someone Else’) {
    jQuery(“.optional-field”).show();

    });
    });
    });

    This is the drop down before dynamically created:

    Code:

    {VAL_OPTS_NAME}


    {VAL_OPTS_NAME}

    ({VAL_OPT_SIGN}{VAL_OPT_PRICE})



    This is the code after it is generated on the page:

    Code:
    Send To:
    Gift Card Message

    Finally, Should you have all of it within the function?

    Code:
    jQuery(document).ready(function() {
    # October 8, 2008 at 11:23 am

    I am not sure what is going on. I can’t seem to get the simplest of actions to occur.

    I even tried to do it by the option values.

    Code:
    jQuery(“.choice”).change(function() {
    var choice = jQuery(“.choice”).val();

    if (choice == “19”) {
    alert (“its 19″);
    } else if (choice == “20”) {
    alert (“its 20″);
    };
    });

    and I get nothing.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".