title: Get selected item value from Bootstrap DropDown with specific ID
body: <p>I am "creating" my own "ComboBox" using <strong><code>Bootstrap 3</code></strong> and <em>JavaScript</em>. <a href="http://jsfiddle.net/kcpma/17/"><strong><code>Here is the JSFiddle</code></strong></a> for what I have so far:</p>
  
  <h2><strong>HTML:</strong></h2>
  
  <pre><code>&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;
  </code></pre>
  
  <h2><strong>JavaScript:</strong></h2>
  
  <pre><code>$(document).on('click', '.dropdown-menu li a', function() {
      $('#datebox').val($(this).html());
  }); 
  </code></pre>
  
  <p>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 <code>'.dropdown-menu li a'</code>.  </p>
  
  <p><strong>How can I change my JQuery to look <em>only</em> for UL with ID <em>demolist</em> and get its <em>selected</em> value?</strong></p>
  
  <p>I have tried the following without success:</p>
  
  <p>I tried <code>'#demolist .dropdown-menu li a'</code> but that will not fire the function:</p>
  
  <pre><code>$(document).on('click', '#demolist .dropdown-menu li a', function() {
      $('#datebox').val($(this).html());
  }); 
  </code></pre>
  
  <p>I tried calling the Click of <strong>#demolist</strong> but <code>#datebox</code> gets the HTML of ALL list item of #demolist and not the <em>selected</em> innerHTML of item:</p>
  
  <pre><code>$('#demolist').on('click', function(){
      $('#datebox').val($(this).html());
  });
  </code></pre>
  
  <h2>UPDATE:</h2>
  
  <p>The working solutions are:</p>
  
  <pre><code>$('#demolist li a').on('click', function(){
      $('#datebox').val($(this).html());
  });
  </code></pre>
  
  <p><strong>OR</strong></p>
  
  <pre><code>$('#demolist li').on('click', function(){
      $('#datebox').val($(this).text());
  });
  </code></pre>