Bootstrap dropdown list button as a form element

Question

This is bootsrap drop down menu

<div id="mySelect" class="select btn-group m-b" data-resize="auto">
    <button style="font-weight:700;background-color:#fff;border-style:solid;
    border-width:2px" type="button" id="expirymonth" name="expirymonth" data-toggle="dropdown" class="btn btn-white btn-sm dropdown-toggle"> <span class="dropdown-label"></span>  <span class="caret"></span>
    </button>
    <input type="hidden" id="expiry_month" name="expiry_month" />
    <ul class="dropdown-menu">
        <li data-value="00" data-selected="true"><a href="#">Select Month</a>
        </li>
        <li data-value="01"><a href="#">01</a>
        </li>
        <li data-value="02"><a href="#">02</a>
        </li>
        <li data-value="03"><a href="#">03</a>
        </li>
        <li data-value="04"><a href="#">04</a>
        </li>
        <li data-value="05"><a href="#">05</a>
        </li>
        <li data-value="06"><a href="#">06</a>
        </li>
        <li data-value="07"><a href="#">07</a>
        </li>
        <li data-value="08"><a href="#">08</a>
        </li>
        <li data-value="09"><a href="#">09</a>
        </li>
        <li data-value="10"><a href="#">10</a>
        </li>
        <li data-value="11"><a href="#">11</a>
        </li>
        <li data-value="12"><a href="#">12</a>
        </li>
    </ul>
</div>
</div>

I want to get the value selected from this drop down menu and assign it to the input field (using an hidden input field <input type="hidden" id="expiry_month">)so that I can use this as a form element.Anyway to do this using jquery?

I have a fiddle with all the bootstrap associated files and the drop down menu

http://jsfiddle.net/6L6Ar/

Nishu Tayal · Accepted Answer · 2013-12-20 10:00:13Z

1

Use following code :

$(".dropdown-menu li").click(function () {
    var selectedOption = parseInt($(this).attr('data-value'), 10);

    $("#expiry_month").val(selectedOption.toString());
    console.log( $("#expiry_month").val());
 });

answered Dec 20, 2013 at 10:00

Nishu Tayal

20.9k8 gold badges53 silver badges105 bronze badges

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

2 Comments

user3105409 Over a year ago

I have more than one menu like this with same ".dropdown-menu li"

Dhanu Gurung Over a year ago

@user3105409: Check this code is working fine. jsfiddle.net/budhram/6L6Ar/1 . In chrome, press F12 and Console tab, then select your month/year. You can able to see selected month or year.

Sridhar R · Accepted Answer · 2013-12-20 10:18:33Z

0

Try this

If you have more than one menu means access elemant using id

$("#first_menu li").on('click',function () {
    var selectedOption = $(this).attr('data-value');
    $("#expiry_month").val(selectedOption);
    alert( $("#expiry_month").val());
 });

Second Menu

$("#second_menu li").on('click',function () {
    var selectedOption = $(this).attr('data-value');
    $("#2ndexpiry_month").val(selectedOption);
    alert( $("#2ndexpiry_month").val());
 });

DEMO

edited Dec 20, 2013 at 10:18

answered Dec 20, 2013 at 10:10

Sridhar R

20.4k7 gold badges41 silver badges35 bronze badges

5 Comments

Dhanu Gurung Over a year ago

Just curious what would you do if this number increases?

Sridhar R Over a year ago

which number? @budhram

Dhanu Gurung Over a year ago

Oops, number of dropdown list from 2 to n. Isn't it good to write scalable code?

Sridhar R Over a year ago

so what it will return value and assign value to the hidden see fiddle

user3105409 Over a year ago

But there is problem here.Only one of the scripts works!! Any solution to that??

Collectives™ on Stack Overflow

Bootstrap dropdown list button as a form element

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related