从Bootstrap DropDown获取具有特定ID的选定项值

Question

我正在使用Bootstrap 3和JavaScript “创建”我自己的“ComboBox”。 Here is the JSFiddle迄今为止我所拥有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函数正在寻找ANY / '.dropdown-menu li a' 。

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

我试过以下没有成功：

我试过'#demolist .dropdown-menu li a'但是这不会'#demolist .dropdown-menu li a'这个函数：

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

我尝试调用#demolist的Click，但#datebox获取#datebox的ALL列表项的HTML而不是选择的itemHTML项：

$('#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/

Answer 2

选择器将是#demolist.dropdown-menu 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 3

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

• jquery代码

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function () { $('#demolist a').on('click', function () { var txt= ($(this).text()); alert("Your Favourite Sports is "+txt); }); }); </script> 

Answer 4

您可能希望将jQuery代码稍微修改为'#demolist li a'以便它专门选择链接中的文本而不是li元素中的文本。 这将允许您有一个子菜单，而不会导致问题。 此外，由于您专门选择了一个标签，您可以使用$(this).text(); 。

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

Answer 5

你刚试过吗？

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

这个对我有用 ：）

Answer 6

作品GReat。

类别问题Apple Banana Cherry

 <input type="text" name="cat_q" id="cat_q"> $(document).ready(function(){ $("#btn_cat div a").click(function(){ alert($(this).text()); }); }); 

Answer 7

试试这个代码

<input type="TextBox" ID="yearBox" border="0" disabled>

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



<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fas fa-calendar-alt"></i> <span>Academic Years</span> <i class="fas fa-chevron-down"></i> </a>
          <ul class="dropdown-menu">
            <li>
              <ul class="menu" id="yearSelected">
                <li><a href="#">2014-2015</a></li>
                <li><a href="#">2015-2016</a></li>
                <li><a href="#">2016-2017</a></li>
                <li><a href="#">2017-2018</a></li>

              </ul>
            </li>
          </ul>

它为我工作