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