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

luc*_*old 27 html javascript jquery twitter-bootstrap

我正在使用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>
Run Code Online (Sandbox Code Playgroud)

JavaScript的:

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

这种方法效果很好,直到我想在页面上多次重复这个"ComboBox".问题在于JQuery函数正在寻找ANY/ALL '.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());
}); 
Run Code Online (Sandbox Code Playgroud)

我尝试调用#demolist的Click但#datebox获取#demolist的所有列表项的HTML而不是选择的itemHTML 项:

$('#demolist').on('click', function(){
    $('#datebox').val($(this).html());
});
Run Code Online (Sandbox Code Playgroud)

更新:

工作解决方案是:

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

要么

$('#demolist li').on('click', function(){
    $('#datebox').val($(this).text());
});
Run Code Online (Sandbox Code Playgroud)

Rya*_*yan 31

$('#demolist li').on('click', function(){
    $('#datebox').val($(this).text());
});
Run Code Online (Sandbox Code Playgroud)

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


小智 6

使用 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>
Run Code Online (Sandbox Code Playgroud)

  • 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>
Run Code Online (Sandbox Code Playgroud)