it-swarm.com.ru

Получить значение выбранного элемента из 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 ищет ANY/ALL '.dropdown-menu li a'

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

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

Я пробовал '#demolist .dropdown-menu li a', но это не сработает:

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

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

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

Обновление:

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

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

ИЛИ ЖЕ

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

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

29
Ryan

Селектором будет #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.

1
Steve

Разработка кода с использованием 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

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

0
TauFeeQ

Работает отлично.

<input type="text" name="cat_q" id="cat_q">  

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

    });
});
0
Michael Bobis

Ты только что попробовал 

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

Меня устраивает :) 

0
Yohann Lopez

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

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