javascript - 更新下拉值

Question

我正在尝试使用 Bootstrap 实现下拉时间选择器:

HTML

<div class="btn-group">
    <a id="from-text" class="btn btn-default">From</a>
    <a
        data-target="#"
        class="btn btn-default dropdown-toggle"
        data-toggle="dropdown">
        <span
            class="caret">
        </span>
    </a>
    <ul id="from" class="dropdown-menu">
        <li><a href="#">10:00 AM</a></li>
    </ul>

    <a id="to-text" class="btn btn-default">To</a>
    <a data-target="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
    <ul id="to" class="dropdown-menu">
        <li><a href="#">10:00 AM</a></li>
    </ul>
</div>

Javascript

    $('#from li').on('click', function(){
        $('#from-text').val($(this).text());
    });

    $('#to li').on('click', function(){
        $('#to-text').val($(this).text());
    });

我正在尝试选择时间，然后更新下拉值以表示该时间。使用上面的代码，当我单击下拉值时，它确实没有更新文本。控制台也没有发现错误。

Answer 1

将事件附加到 元素上。

JavaScript:

$('#from li a').on('click', function(){
    $('#datebox').text($(this).text());
});

$('#to li a').on('click', function(){
    $('#datebox').text($(this).text());
});

您可以在不同的 .btn-group div 中拥有两个下拉菜单。

HTML:

<div class="btn-group">
    <a id="from-text" class="btn btn-default">From</a>
    <a
        data-target="#"
        class="btn btn-default dropdown-toggle"
        data-toggle="dropdown">
        <span
            class="caret">
        </span>
    </a>
    <ul id="from" class="dropdown-menu">
        <li><a href="#">10:00 AM</a></li>
    </ul>
</div>

<div class="btn-group">
    <a id="to-text" class="btn btn-default">To</a>
    <a data-target="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
    <ul id="to" class="dropdown-menu">
        <li><a href="#">10:00 AM</a></li>
    </ul>
</div>