Получить выбранное значение элемента из Bootstrap DropDown с определенным идентификатором

Я создаю свой собственный "ComboBox", используя Bootstrap 3 и JavaScript. Here is the JSFiddle за то, что у меня есть до сих пор:

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

Этот подход работает отлично, пока я не хочу повторять этот "ComboBox" несколько раз на странице. Проблема в том, что функция JQuery ищет ЛЮБОЕ/ВСЕ '.dropdown-menu li a'.

Как я могу изменить свой JQuery, чтобы посмотреть только на UL с идентификатором ID и получить его выбранное значение?

Я пробовал следующее без успеха:

Я попробовал '#demolist .dropdown-menu li a', но это не приведет к срабатыванию функции:

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

Я попытался вызвать Click #demolist, но #datebox получает HTML-код всего элемента списка #demolist, а не выбранного innerHTML элемента:

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

UPDATE:

Рабочие решения:

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

ИЛИ

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

Ответ 1

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

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

Ответ 2

Селектор будет #demolist.dropdown-menu li a не замечать пробел между id и классом. Однако я бы предложил более общий подход:

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

используя класс, а не id, и используя parent().find(), вы можете иметь столько же на странице, сколько хотите, без дублирования js

Ответ 3

Возможно, вы захотите немного изменить код jQuery на '#demolist li a', чтобы он специально выбирал текст, который находится в ссылке, а не текст, который находится в элементе li. Это позволит вам иметь подменю, не вызывая проблем. Кроме того, поскольку вы специально выбираете тег, вы можете получить к нему доступ с помощью $(this).text();.

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

Ответ 4

Вы просто попробовали

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

Это работает для меня:)