Get the value selected in dropdown using jQuery

Please follow the steps:

1. Go to beta.worldofwomenfoundation.com and Sign in

2. username: annettecox

password: 12345

A candidate profile page will open up

3. I want to get the value selected in the field for the li element (https://imgur.com/a/pWiIsUn) "Are you a working professional or returning from a sabbatical" using jQuery. Based on the value selected, I will either hide or show the fields in the Sabbatical section.

4. I have also noted that a class gets appended "result-sabbatical" to the li element. But if a user selects any other value, then this class doesn't get appended to the newly selected value. It only updates on clicking the Update button on the page. In this case how will I manage to hide or show the fields correctly

I would like to know how to get the correct value selected in this field .

  • Dimitris
    • Support Star

    Hello Sonam,

    hope you’re doing good today! :slight_smile:

    The following snippet should do the trick, on getting the text selected.

    (function($) {
    text = $('select[name="cs_cus_field[working-or-sabbatical]"] + .chosen-container > a > span').text();
    if ( text != 'I was on a sabbatical and want to return to work' ) {
    // hide Sabbatical section, better wrap it in a div with a custom ID, so it's easily hidden
    }
    })( jQuery );

    I can also see that you have some change() trigger event when I change this dropdown, so use this as a wrapper for above snippet. :wink:

    Please keep in mind that I couldn’t test it directly in your website. For that, I’ll need you to revoke and re-grant support access, as well as install a little plugin like this.

    Warm regards,

    Dimitris

  • Sonam
    • WPMU DEV Initiate

    Hello,

    Thanks. I am able to get the value

    var valSelected =jQuery('[name="cs_cus_field[working-or-sabbatical]"]')
    .siblings()
    .children()[0]
    .innerText;

    Now I want to compare this value

    if (valSelected === "I am already working and want to explore more opportunities") {
    key=1;
    }
    else {
    key=2;
    }

    but there is something wrong. It always returns 2 even when the string matches exactly.

    How should I compare

  • Adam Czajczyk
    • Support Gorilla

    Hi Sonam

    I hope you’re fine today and don’t mind me jumping in.

    I took a liberty of accessing your site (as suggested in your initial post) and this will work for you:

    if (/I am already working and want to explore more opportunities/i.test(valSelected)) {
    key = 1;
    }
    else {
    key = 2;
    }

    It’s a slightly different approach that uses regex for condition check and it doesn’t check whether the “valSelected” is exactly the given text but it checks if it contains that text (additionally ignoring upper/lower case characters so “AND WANT” would be the same as “and want”…:wink:.

    I hope that helps :slight_smile:

    Best regards,

    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.