35

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

7 Answers 7

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

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

3
  • 1
    I have tried this before also, but it didnt work for me. The issue is how to get the SELECTD item, not ALL items.
    – lucidgold
    Jul 7, 2014 at 22:23
  • Good catch! The working code would be #demolist li a
    – lucidgold
    Jul 7, 2014 at 22:28
  • 1
    This returns value="[object Object]" for me.
    – jimiayler
    Jan 31, 2019 at 16:39
7

Design code using 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 Code

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

2

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

4
  • You are correct, however I am interested in getting the selected value of a specific LIST. Your approach only updates ANY INPPUT with .datebox class.
    – lucidgold
    Jul 7, 2014 at 22:24
  • 1
    Well as i said #demolist.dropdown-menu li a will do what you want. However my suggested code updates the specific input that is next to the clicked link (technically the input that is a sibling of the ul), so you can have 10 of these code blocks on a page and each one updates its own input
    – Steve
    Jul 7, 2014 at 22:28
  • Yes but the issue is: ANY item that has class .dropdown-menu li a is going to trigger the CLICK function. I only wanted to trigger the function if and when a specific UL with a list of items gets clicked. Thanks for your help! I upvoted your answer.
    – lucidgold
    Jul 7, 2014 at 22:33
  • 1
    Ah Ok, I was under the impression you wanted to create a reusable control without having to wire up specific click handlers for each one. My mistake, glad you found a solution
    – Steve
    Jul 7, 2014 at 22:41
1

Did you just try

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

It works for me :)

1
  • 2
    Yohann, please add more details regarding how did you test it, maybe steps and versions you are using to help to solve the issue. Nov 25, 2017 at 16:35
0

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

Works GReat.

Category Question Apple Banana Cherry
<input type="text" name="cat_q" id="cat_q">  

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

    });
});
2
  • <div class="dropdown" id="btn_cat"> <button type="button" class="btn btn-primary dropdown-toggle" data- toggle="dropdown"> Category Question </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">A</a> <a class="dropdown-item" href="#">B</a> <a class="dropdown-item" href="#">C</a> </div> </div> <input type="text" name="cat_q" id="cat_q"> Jul 2, 2018 at 6:13
  • Maybe this comment should added to the answer as an edit. Jul 2, 2018 at 6:36
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.