更新下拉列表值

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

将事件附加到＆lt; a＆gt;元件。

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>

Answer 2

如果要替换元素内的文本，请使用text(newText)。

$('#from-text').text($(this).text());

Answer 3

缺少HTML中元素的ID。你想在哪里添加datebox的值，给它一个id =＆＃34; datebox＆＃34;

但是现在您的代码将更新相同的框值，因此您可能希望更改ID名称，以便从＆＃34; From＆＃34;中获取值。另一个是＆＃34; TO＆＃34;

Answer 4

如果要完全替换文本，请使用text()函数而不是val()。

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

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