Get Value From html drop down menu in jquery

Question

I have an html form and having a little trouble getting the selected value on it, here is the html

 <form>
    <div class="row">
        <div class="form-group col-xs-12 col-md-8">
            <label>Contact Info</label>
            <input tabIndex="100" class="form-control square" placeholder="Your email address" autocomplete="off" data-error-style="inline" name="email" type="text">
        </div>
        <div class="form-group col-xs-12 col-md-4">
                <label>Gender</label>
                <div class="drop-down-holder ">
                    <div class="simple-dropdown dropdown btn-dropdown dropdown-module dropdown-toggle"
                            data-toggle="dropdown"
                            type="button">
                    <button tabindex="101" class="dropdown-module dropdown-toggle" type="button" data-toggle="dropdown" data-target="#">
                        <div class="simple-holder">
                            <div class="dropdown-label">Select Gender</div>
                            <div class="icon-holder"><i class="icon-caret-down"></i></div>
                        </div>
                      </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a class="female">Female</a></li>
                        <li><a class="male">Male</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</form>

I've tried a few things in console and keep getting empty strings This is what I've tried

$(".dropdown-menu").text();

This one returns just the text female and male in a string

$(".dropdown-menu").val();

empty string $(".dropdown-menu :selected").text();

also empty string

 $(".dropdown-menu option:selected").text();

empty

$('.dropdown-menu option:selected').val();

undefined

So any clue on how I can get weather the user selected male or female? I need that value for a conditional statement that will redirect them to a certain page depending on their gender.

Answer 1

Hey guys figured out the answer

$(".dropdown-module").val();

this is the class of the button, since bootstrap uses divs and uls for dropdown I needed to target the dropdown-module

Answer 2

To cover your previous attempts:

$(".dropdown-menu").text();

.text() returns the .text values of all the element and its child elements, so gives you female and male

 $(".dropdown-menu").val();

A ul doesn't have any val(), it's not an <input>

 $(".dropdown-menu option:selected").text();  / .val();

A ul is not a <select> so won't have any child items of type <option>

Whatever plugin you are using to convert the ul/li to a 'drop down' will apply a class when you select one of the ul. For now, assume the class is selected, you'll likely need to use:

 $(".dropdown-menu li.selected")

to get the li selected, then depending on requirements:

 $(".dropdown-menu li.selected").text()

To find out the class that is applied, you could (hopefully) be able to find this in docs for the plugin. If that's not available (or unclear), use a browser (personally, I find Chrome easiest for this) - press F12, find the element and the associated styles, then select the item. The class names should change and you should be able to see this in the console.

Alternatively, there may be an event you can listen to (or your inherited code already listens to) which is fired when the item is clicked and should provide the details for the clicked item.