[javascript] Get selected item value from Bootstrap DropDown with specific ID

I am "creating" my own "ComboBox" using Bootstrap 3 and JavaScript. Here is the JSFiddle for what I have so far:

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());
}); 

This approach works great untill I want to repeat this "ComboBox" several times on the page. The issue is with the JQuery function looking for ANY/ALL '.dropdown-menu li a'.

How can I change my JQuery to look only for UL with ID demolist and get its selected value?

I have tried the following without success:

I tried '#demolist .dropdown-menu li a' but that will not fire the function:

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

I tried calling the Click of #demolist but #datebox gets the HTML of ALL list item of #demolist and not the selected innerHTML of item:

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

UPDATE:

The working solutions are:

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

OR

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

The selector would be #demolist.dropdown-menu li a note no space between id and class. However i would suggest a more generic approach:

<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());
}); 

by using a class rather than id, and using parent().find(), you can have as many of these on a page as you like, with no duplicated js

Works GReat.

<input type="text" name="cat_q" id="cat_q">  

$(document).ready(function(){
    $("#btn_cat div a").click(function(){
       alert($(this).text());

    });
});

You might want to modify your jQuery code a bit to '#demolist li a' so it specifically selects the text that is in the link rather than the text that is in the li element. That would allow you to have a sub-menu without causing issues. Also since your are specifically selecting the a tag you can access it with $(this).text();.

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

Did you just try

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

It works for me :)

Design code using Bootstrap

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

• jquery Code

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

Try this code

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

its work for me