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

试试这个

如果您有多个菜单，则表示使用ID

的访问元素

$("#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

Bootstrap下拉列表按钮作为表单元素

2 个答案: