Bootstrap Кнопка выпадающего списка в качестве элемента формы

Question

Это bootsrap выпадающего меню

<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> 

Я хочу, чтобы получить значение, выбранное из этого выпадающего меню и назначить его на поле ввода (с помощью скрытого поля ввода <input type="hidden" id="expiry_month">), так что я могу использовать это как элемент формы. Как это сделать, используя jquery?

У меня есть скрипка со всеми бутстраповскими связаны файлами и выпадающего меню

http://jsfiddle.net/6L6Ar/

Answer 1

Используйте следующий код:

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

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

Answer 2

Try это

Если у вас есть больше, чем одно меню означает элемент доступа с использованием идентификатора

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

Второе меню

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

DEMO