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.

Just curious, is there any particular reason you have chosen to use a List rather than a Select menu? — wrxsti
– wrxsti, Commented Jun 5, 2015 at 15:26
it is inherited code, I have to work with what I got for this one — Palermo Deschamps
– Palermo Deschamps, Commented Jun 5, 2015 at 15:27
this is a handle bars template thats using bootstrap and backbone — Palermo Deschamps
– Palermo Deschamps, Commented Jun 5, 2015 at 15:28
What about $('.dropdown-menu').find('li > a').on('click', function() { console.log($(this).text()); });? — D4V1D
– D4V1D, Commented Jun 5, 2015 at 15:29
It looks like he is using this: getbootstrap.com/components/#dropdowns-example I'm looking over it now to see what options are available. — wrxsti
– wrxsti, Commented Jun 5, 2015 at 15:35

fdomn-m · Accepted Answer · 2015-06-05 15:42:50Z

1

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.

answered Jun 5, 2015 at 15:42

fdomn-m

28.8k8 gold badges39 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

wrxsti Over a year ago

From the bootstrap documentation, all I can gather is that he will have to apply his own listeners on click of the option, apply the value to a variable, then recall that variable later upon submission. Its a bad way to do a form. :(

fdomn-m Over a year ago

@wrxsti I had a look at your bootstrap link and related links, which is why I added the edit for an event. It does look like these are intended for navigation ("Toggleable, contextual menu for displaying lists of links") but calling them "dropdowns" is just confusing! I tried to give a generic answer until the specific plugin is specified.

wrxsti Over a year ago

Good on ya. There is definitely several ways he could pull this data, it just seems like he is fighting a feature that is being improperly used.

Palermo Deschamps · Accepted Answer · 2015-06-05 16:48:27Z

0

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

answered Jun 5, 2015 at 16:48

Palermo Deschamps

11 bronze badge

Collectives™ on Stack Overflow

Get Value From html drop down menu in jquery

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related