从具有特定ID的引导下拉列表中获取所选项目值

Question

我正在使用Bootstrap 3和JavaScript创建我自己的ComboBox。

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

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

这种方法非常有效，直到我想在页面上重复多次这个“组合框”。问题在于JQuery函数查找任何/所有'。下拉菜单LIA'。

如何将JQuery更改为仅查找ID为demolist的UL并获取其选定值？

我尝试了以下方法，但没有成功：

我尝试了'#拆卸器. dropdown-菜单li a'，但不会触发函数：

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

我尝试调用#demolist的单击，但#datebox获取#demolist的所有列表项的HTML，而不是项目的选定内部HTML：

$('#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.dropdown菜单li a注意id和class之间没有空格。然而，我建议采取一种更普遍的办法：

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


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

通过使用类而不是id，并使用parent（）。find（），在一个页面上可以有任意多个，而不需要重复的js

Answer 2

使用Bootstrap设计代码

<div class="dropdown-menu" id="demolist">
  <a class="dropdown-item" h ref="#">Cricket</a>
  <a class="dropdown-item" href="#">UFC</a>
  <a class="dropdown-item" href="#">Football</a>
  <a class="dropdown-item" href="#">Basketball</a>
</div>

Answer 3

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

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