javascript - 从具有特定 ID 的 Bootstrap DropDown 中获取选定的项目值

Question

我正在使用 Bootstrap 3 和 JavaScript“创建”我自己的“ComboBox”。 Here is the JSFiddle对于我目前所拥有的:

HTML:

<div class="input-group">                                            
    <input type="TextBox" ID="datebox" Class="form-control"></input>
    <div class="input-group-btn">
        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
        </button>
        <ul id="demolist" class="dropdown-menu">
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
        </ul>
    </div>
</div>

JavaScript:

$(document).on('click', '.dropdown-menu li a', function() {
    $('#datebox').val($(this).html());
}); 

在我想在页面上多次重复这个“ComboBox”之前，这种方法非常有效。问题在于 JQuery 函数寻找任何/所有 '.dropdown-menu li a'。

我如何更改我的 JQuery 以仅 ID 为 demolist 的 UL 并获取其选定值？

我已经尝试了以下但没有成功:

我试过 '#demolist .dropdown-menu li a' 但不会触发函数:

$(document).on('click', '#demolist .dropdown-menu li a', function() {
    $('#datebox').val($(this).html());
}); 

我尝试调用 #demolist 的 Click，但 #datebox 获取的是 #demolist 的所有列表项的 HTML，而不是 selected innerHTML项目:

$('#demolist').on('click', function(){
    $('#datebox').val($(this).html());
});

更新:

可行的解决方案是:

$('#demolist li a').on('click', function(){
    $('#datebox').val($(this).html());
});

或

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

Answer 1

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

http://jsfiddle.net/kcpma/18/