Как изменить заголовок кнопки выпадающего меню, выбрав пункт? - PullRequest
0 голосов
/ 18 марта 2019

Мне нужно изменить заголовок раскрывающегося списка, когда я выбираю элемент в раскрывающемся списке, сейчас это мой код

<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data- 
toggle="dropdown">
Option: <span class="selection">Groups</span><span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu">
  <li><a href="#">Group 1</a></li>
  <li><a href="#">Group 2</a></li>
  <li><a href="#">Group 3</a></li>
 </ul>
 </div>

а это jQuery

$(".dropdown-menu li a").click(function(){

 $(this).parents(".btn-group").find('.selection').text($(this).text());
 $(this).parents(".btn-group").find('.selection').val($(this).text());

});

Все равно не меняет мой заголовок при выборе любого из них.

Ответы [ 2 ]

1 голос
/ 18 марта 2019

Насколько я понял, ваша проблема в том, что вы хотите изменить текст кнопки, щелкнув связанный текст, если это так, вы можете попробовать это: http://jsbin.com/owuyix/4/edit

 $(function(){

    $(".dropdown-menu li a").click(function(){

      $(".btn:first-child").text($(this).text());
      $(".btn:first-child").val($(this).text());

   });

});

Согласно вашему комментарию:

это не работает для меня, когда у меня есть элемент списка <li>, заполненный с помощью вызова ajax.

поэтому вы должны делегировать событие ближайшему статическому родителю с помощью .on() jQuery метода:

 $(function(){

    $(".dropdown-menu").on('click', 'li a', function(){
      $(".btn:first-child").text($(this).text());
      $(".btn:first-child").val($(this).text());
   });

});

Здесь событие делегируется статическому родителю $(".dropdown-menu"), хотя вы также можете делегировать событие $(document), потому что оно всегда доступно.

1 голос
/ 18 марта 2019

Добавьте это к вашему <head>:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

Возможно, вы забыли включить библиотеку JQuery.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...