#html #asp.net #asp.net-mvc #search #dropdown
#HTML #asp.net #asp.net-mvc #Поиск #выпадающий
Вопрос:
Мне нужно изменить заголовок выпадающего списка, когда я выбираю элемент в выпадающем списке, это мой код на данный момент
<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());
});
По-прежнему не меняет мой заголовок, когда я выбираю любой из них.
Комментарии:
1. Ваш код работает нормально. Это изменяет заголовок.
Ответ №1:
Добавьте это в свой <head> :
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
Возможно, вы забыли включить библиотеку jQuery.
Ответ №2:
Насколько я понял, ваша проблема заключается в том, что вы хотите изменить текст кнопки с помощью текста, связанного с щелчком, если это так, вы можете попробовать это: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) , потому что оно всегда доступно.