부트 스트랩 버튼 드롭 다운 제목에 선택한 항목을 표시하는 방법
내 응용 프로그램에서 다음과 같이 부트 스트랩 드롭 다운 구성 요소를 사용하고 있습니다.
<div class="btn-group">
<button class="btn">Please Select From List</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Item I</a></li>
<li><a tabindex="-1" href="#">Item II</a></li>
<li><a tabindex="-1" href="#">Item III</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Other</a></li>
</ul>
</div>
선택한 항목을 btn 레이블로 표시하고 싶습니다. 즉, "목록에서 선택하십시오"를 선택한 목록 항목 ( "항목 I", "항목 II", "항목 III")으로 바꾸십시오.
내가 아는 한 링크가 클릭 된 텍스트로 버튼의 텍스트를 변경하려는 경우이 작업을 시도 할 수 있습니다 .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>아약스 호출을 통해 채워진 목록 항목이있을 때 이것은 작동하지 않습니다 .
따라서 .on()jQuery 메소드 를 사용하여 가장 가까운 정적 상위에 이벤트를 위임해야합니다 .
$(function(){
$(".dropdown-menu").on('click', 'li a', function(){
$(".btn:first-child").text($(this).text());
$(".btn:first-child").val($(this).text());
});
});
여기서 이벤트는 정적 parent $(".dropdown-menu")에 위임되지만 $(document)항상 사용 가능하므로 이벤트도 위임 할 수 있습니다.
부트 스트랩 3.3.4 용으로 업데이트 :
이를 통해 각 요소마다 다른 표시 텍스트와 데이터 값을 가질 수 있습니다. 또한 선택시 캐럿을 유지합니다.
JS :
$(".dropdown-menu li a").click(function(){
$(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
$(this).parents(".dropdown").find('.btn').val($(this).data('value'));
});
HTML :
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#" data-value="action">Action</a></li>
<li><a href="#" data-value="another action">Another action</a></li>
<li><a href="#" data-value="something else here">Something else here</a></li>
<li><a href="#" data-value="separated link">Separated link</a></li>
</ul>
</div>
부트 스트랩 3에서 작동하는 꽤 좋은 프리젠 테이션으로 하나 이상의 버튼 드롭 다운이있는 경우 Jai의 대답을 약간 향상시킬 수있었습니다.
버튼 코드
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Option: <span class="selection">Option 1</span><span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 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());
});
또한 "선택"클래스에 5px 마진 오른쪽을 추가했습니다.
이것은 동일한 페이지에서 둘 이상의 드롭 다운에서 작동합니다. 또한 선택한 항목에 캐럿을 추가했습니다.
$(".dropdown-menu").on('click', 'li a', function(){
$(this).parent().parent().siblings(".btn:first-child").html($(this).text()+' <span class="caret"></span>');
$(this).parent().parent().siblings(".btn:first-child").val($(this).text());
});
이 단일 jQuery 함수는 필요한 모든 것을 수행합니다.
$( document ).ready(function() {
$('.dropdown').each(function (key, dropdown) {
var $dropdown = $(dropdown);
$dropdown.find('.dropdown-menu a').on('click', function () {
$dropdown.find('button').text($(this).text()).append(' <span class="caret"></span>');
});
});
});
여기에 내 버전이 있습니다. 시간을 절약 할 수 있기를 바랍니다. :)
jQuery 파트 :
$(".dropdown-menu").on('click', 'li a', function(){
var selText = $(this).children("h4").html();
$(this).parent('li').siblings().removeClass('active');
$('#vl').val($(this).attr('data-value'));
$(this).parents('.btn-group').find('.selection').html(selText);
$(this).parents('li').addClass("active");
});
HTML 부분 :
<div class="container">
<div class="btn-group">
<a class="btn btn-default dropdown-toggle btn-blog " data-toggle="dropdown" href="#" id="dropdownMenu1" style="width:200px;"><span class="selection pull-left">Select an option </span>
<span class="pull-right glyphiconglyphicon-chevron-down caret" style="float:right;margin-top:10px;"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li><a href="#" class="" data-value=1><p> HER Can you write extra text or <b>HTLM</b></p> <h4> <span class="glyphicon glyphicon-plane"></span> <span> Your Option 1</span> </h4></a> </li>
<li><a href="#" class="" data-value=2><p> HER Can you write extra text or <i>HTLM</i> or some long long long long long long long long long long text </p><h4> <span class="glyphicon glyphicon-briefcase"></span> <span>Your Option 2</span> </h4></a>
</li>
<li class="divider"></li>
<li><a href="#" class="" data-value=3><p> HER Can you write extra text or <b>HTLM</b> or some </p><h4> <span class="glyphicon glyphicon-heart text-danger"></span> <span>Your Option 3</span> </h4></a>
</li>
</ul>
</div>
<input type="text" id="vl" />
</div>
you need to use add class open in <div class="btn-group open">
and in li add class="active"
Further modified based on answer from @Kyle as $.text() returns exact string, so the caret tag is printed literally, than as a markup, just in case someone would like to keep the caret intact in dropdown.
$(".dropdown-menu li").click(function(){
$(this).parents(".btn-group").find('.btn').html(
$(this).text()+" <span class=\"caret\"></span>"
);
});
I have corrected script for multiple dropdowns on the page
$(function(){
$(".dropdown-menu li a").click(function(){
var item = $(this);
var id = item.parent().parent().attr("aria-labelledby");
$("#"+id+":first-child").text($(this).text());
$("#"+id+":first-child").val($(this).text());
});
});
It seems to be a long issue. All we want is just implement a select tag in the input group. But the bootstrap would not do it: https://github.com/twbs/bootstrap/issues/10486
the trick is just adding "btn-group" class to the parent div
html:
<div class="input-group">
<div class="input-group-btn btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Product Name <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
</ul>
</div>
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Search</button>
</span>
</div>
js:
$(".dropdown-menu li a").click(function(e){
var selText = $(this).text();
$(this).parents('.input-group').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');
});
Another simple way (Bootstrap 4) to work with multiple dropdowns
$('.dropdown-item').on('click', function(){
var btnObj = $(this).parent().siblings('button');
$(btnObj).text($(this).text());
$(btnObj).val($(this).text());
});
Once you click the item add some data attribute like data-selected-item='true' and get it again.
Try adding data-selected-item='true' for li element that you clicked, then
$('ul.dropdown-menu li[data-selected-item] a').text();
Before adding this attribute you simply remove existing data-selected-item in the list. Hope this would help you
For information about data attribute usage in jQuery, refer jQuery data
I had to put some the displayed javascripts above inside the "document.ready" code. Otherwise they didn't work. Probably obvious for many, but not for me. So if you're testing look at that option.
<script type="text/javascript">
$(document).ready(function(){
//rest of the javascript code here
});
</script>
For example:
HTML:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
<BtnCaption>Select item</BtnCaption>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li class="disabled"><a href="#">Option 3</a></li>
</ul>
</div>
I use new element BtnCaption for changing only button's text.
Paste into $(document).ready(function () {} the following text
JavaScript:
$(".dropdown-menu li:not(.disabled) a").click(function () {
$(this).closest(".dropdown").find(".btn BtnCaption").text($(this).text()));
});
:not(.disabled) don't allow use the disabled menu items
'development' 카테고리의 다른 글
| Django에서 빈 쿼리 세트 확인 (0) | 2020.06.10 |
|---|---|
| 만드는 방법 (0) | 2020.06.09 |
| Windows Workflow Foundation을 언제 사용해야합니까? (0) | 2020.06.09 |
| 동적으로 가져온 모듈의 클래스 문자열 이름에서 동적 인스턴스화? (0) | 2020.06.09 |
| 두 개의 SELECT 문 결과에 참여 (0) | 2020.06.09 |