【问题标题】:Bootstrap dropdown list button as a form elementBootstrap 下拉列表按钮作为表单元素
【发布时间】:2014-01-09 03:39:54
【问题描述】:

这是引导下拉菜单

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

我想从这个下拉菜单中选择值并将其分配给输入字段(使用隐藏输入字段&lt;input type="hidden" id="expiry_month"&gt;),以便我可以将其用作表单元素。无论如何使用 jquery 来做到这一点?

我对所有引导关联文件和下拉菜单都很感兴趣

http://jsfiddle.net/6L6Ar/

【问题讨论】:

    标签: javascript jquery html forms twitter-bootstrap


    【解决方案1】:

    试试这个

    如果你有多个菜单意味着使用 id 访问 elemant

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

    【讨论】:

    • 只是好奇如果这个数字增加你会怎么做?
    • 哪个号码? @budhram
    • 糟糕,下拉列表的数量从 2 到 n。编写可扩展的代码不是很好吗?
    • 那么它将返回值并将值分配给隐藏的看小提琴
    • 但是这里有问题。只有一个脚本有效!!有什么解决办法吗??
    【解决方案2】:

    使用以下代码:

    $(".dropdown-menu li").click(function () {
        var selectedOption = parseInt($(this).attr('data-value'), 10);
    
        $("#expiry_month").val(selectedOption.toString());
        console.log( $("#expiry_month").val());
     });
    

    【讨论】:

    • 我有不止一个这样的菜单,具有相同的“.dropdown-menu li”
    • @user3105409:检查此代码是否正常工作。 jsfiddle.net/budhram/6L6Ar/1 。在 chrome 中,按 F12 和控制台选项卡,然后选择您的月/年。您可以看到选定的月份或年份。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-08-22
    • 2022-10-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-11-07
    相关资源
    最近更新 更多