Get selected item value from Bootstrap DropDown with specific ID

Question

I am  creating  my own  ComboBox  using Bootstrap 3 and JavaScript  Here is the JSFiddle for what I have so far   HTML    lt div class  input-group  gt                                                   lt input type  TextBox  ID  datebox  Class  form-control  gt  lt  input gt       lt div class  input-group-btn  gt           lt button type  button  class  btn dropdown-toggle  data-toggle  dropdown  gt               lt span class  caret  gt  lt  span gt           lt  button gt           lt ul id  demolist  class  dropdown-menu  gt               lt li gt  lt a href     gt A lt  a gt  lt  li gt               lt li gt  lt a href     gt B lt  a gt  lt  li gt               lt li gt  lt a href     gt C lt  a gt  lt  li gt           lt  ul gt       lt  div gt   lt  div gt    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

User · Accepted Answer

demolist li   on  click   function            datebox   val   this  text           http   jsfiddle net kcpma 18

User · Answer

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

User · Answer

The selector would be  demolist dropdown-menu li a note no space between id and class  However i would suggest a more generic approach    lt div class  input-group  gt                                                   lt input type  TextBox  Class  form-control datebox  gt  lt  input gt       lt div class  input-group-btn  gt       lt button type  button  class  btn dropdown-toggle  data-toggle  dropdown  gt           lt span class  caret  gt  lt  span gt       lt  button gt       lt ul class  dropdown-menu  gt           lt li gt  lt a href     gt A lt  a gt  lt  li gt           lt li gt  lt a href     gt B lt  a gt  lt  li gt           lt li gt  lt a href     gt C lt  a gt  lt  li gt       lt  ul gt   lt  div gt      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

User · Answer

Works GReat             Category Question               Apple     Banana     Cherry             lt input type  text  name  cat q  id  cat q  gt       document  ready function            btn cat div a   click function           alert   this  text

User · Answer

Did you just try       datebox li a   on  click   function              datebox   val   this  text         alert   this  text           It works for me

User · Answer

Design code using Bootstrap   x000D   x000D   lt div class  dropdown-menu  id  demolist  gt  x000D     lt a class  dropdown-item  h ref     gt Cricket lt  a gt  x000D     lt a class  dropdown-item  href     gt UFC lt  a gt  x000D     lt a class  dropdown-item  href     gt Football lt  a gt  x000D     lt a class  dropdown-item  href     gt Basketball lt  a gt  x000D   lt  div gt  x000D   x000D   x000D     jquery Code    x000D   x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt script gt  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   lt  script gt  x000D   x000D   x000D

User · Answer

Try this code   lt input type  TextBox  ID  yearBox  border  0  disabled gt       yearSelected li   on  click   function                        yearBox   val   this  text                         lt a href     class  dropdown-toggle  data-toggle  dropdown  gt   lt i class  fas fa-calendar-alt  gt  lt  i gt   lt span gt Academic Years lt  span gt   lt i class  fas fa-chevron-down  gt  lt  i gt   lt  a gt             lt ul class  dropdown-menu  gt               lt li gt                 lt ul class  menu  id  yearSelected  gt                   lt li gt  lt a href     gt 2014-2015 lt  a gt  lt  li gt                   lt li gt  lt a href     gt 2015-2016 lt  a gt  lt  li gt                   lt li gt  lt a href     gt 2016-2017 lt  a gt  lt  li gt                   lt li gt  lt a href     gt 2017-2018 lt  a gt  lt  li gt                  lt  ul gt               lt  li gt             lt  ul gt    its work for me

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

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to twitter-bootstrap