부트스트랩 버튼 드롭다운 제목에 선택한 항목을 표시하는 방법
다음과 같이 응용 프로그램에서 부트스트랩 드롭다운 구성 요소를 사용하고 있습니다.
<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 라벨로 표시하고 싶습니다.즉, "Please Select From List"를 선택한 목록 항목("Item I", "Item II", "Item 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>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)항상 사용할 수 있기 때문입니다.
부트스트랩 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 마진 권리를 추가했습니다.
이 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>');
});
});
});
여러 드롭다운으로 작업할 수 있는 또 다른 간단한 방법(Bootstrap 4)
$('.dropdown-item').on('click', function(){
var btnObj = $(this).parent().siblings('button');
$(btnObj).text($(this).text());
$(btnObj).val($(this).text());
});
여기 당신의 시간을 절약할 수 있기를 바라는 제 버전이 있습니다 :)
PART: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>
이 페이지는 동일한 페이지의 두 개 이상의 드롭다운에서 작동합니다.또한 선택한 항목에 캐럿을 추가했습니다.
$(".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());
});
class 를 사용해야 합니다.open<div class="btn-group open">
그고리로.li더하다class="active"
$.text()로 @Kyle의 응답을 기준으로 추가 수정하면 정확한 문자열이 반환되므로 누군가가 드롭다운에서 캐럿을 그대로 유지하려는 경우를 대비하여 캐럿 태그가 마크업으로 인쇄되지 않고 문자 그대로 인쇄됩니다.
$(".dropdown-menu li").click(function(){
$(this).parents(".btn-group").find('.btn').html(
$(this).text()+" <span class=\"caret\"></span>"
);
});
페이지의 여러 드롭다운에 대한 스크립트를 수정했습니다.
$(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());
});
});
그것은 긴 이슈인 것 같습니다.우리가 원하는 것은 입력 그룹에서 선택 태그를 구현하는 것입니다.그러나 부트스트랩은 이를 수행하지 않았습니다. https://github.com/twbs/bootstrap/issues/10486
트릭은 부모 div에 "btn-group" 클래스를 추가하는 것입니다.
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>');
});
꽤 오래된 질문이지만...저는 플레인/바닐라 JS로 이 작업을 수행하고 싶었기 때문에 다음과 같은 방법으로 이 작업을 수행할 수 있습니다(ECMAScript 2015 (ES6) 구문, Bootstrap 5.1 작업).
let selectorList = Array
.from(document.querySelectorAll('dropdown-menu'))
.forEach(selector => {
//Add an event listener for displaying the selected dropdown item
selector.addEventListener("click", function() {
let selectorButton = selector.previousElementSibling || selector.nextElementSibling;
selectorButton.textContent = this.querySelector(":checked").value;
selectorButton.value = this.querySelector(':checked').value;
});
});
JQuery를 사용하고 있습니다.siblings()JS를 이용한 아이디어previousElementSibling() || nextElementSibling()방법, 그것은 바로 앞이나 뒤에 버튼 요소를 찾을 것입니다.<ul class="dropdown-menu"></ul>원소의
항목을 클릭하면 data-selected-item='true'와 같은 데이터 속성을 추가하고 다시 가져옵니다.
클릭한 li 요소에 대해 data-selected-item='true'를 추가해 보십시오.
$('ul.dropdown-menu li[data-selected-item] a').text();
이 특성을 추가하기 전에 목록에서 기존 데이터 선택 항목을 제거하기만 하면 됩니다.이것이 당신에게 도움이 되길 바랍니다.
jQuery의 데이터 속성 사용에 대한 자세한 내용은 jQuery 데이터를 참조하십시오.
위에 표시된 자바스크립트를 "document.ready" 코드 안에 넣어야 했습니다.그렇지 않으면 효과가 없었습니다.많은 사람들에게는 분명하겠지만, 저에게는 그렇지 않습니다.테스트 중이라면 이 옵션을 확인해 보십시오.
<script type="text/javascript">
$(document).ready(function(){
//rest of the javascript code here
});
</script>
예:
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>
버튼의 텍스트만 변경하기 위해 새로운 요소 BtnCaption을 사용합니다.
다음 텍스트에 붙여넣기
JavaScript:
$(".dropdown-menu li:not(.disabled) a").click(function () {
$(this).closest(".dropdown").find(".btn BtnCaption").text($(this).text()));
});
:not(.disabled) 사용할 수 없는 메뉴 항목 사용 허용 안 함
저는 그것을 위해 선택적 부동 라벨을 사용하는 것을 선호합니다.
<div class="form-floating">
<select class="form-select" id="floatingSelect" aria-label="Floating label select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelect">Works with selects</label>
</div>
바닐라 JS와 부트스트랩 5를 사용한 단순화된 버전입니다.
let selectorBtn = document.querySelector('.dropdown-toggle');
let items = document.querySelectorAll('.dropdown-item');
items.forEach(item => {
item.addEventListener("click", function() {
selectorBtn.innerHTML = item.text;
selectorBtn.value = item.dataset.value;
console.log(`innerHTML: ${selectorBtn.innerHTML}, value: ${selectorBtn.value}`);
});
});<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group m-1" role="group" aria-label="Type">
<button type="button" class="btn btn-hornets dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Please Select From List
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" data-value="1" href="#">Item I</a></li>
<li><a class="dropdown-item" data-value="2" href="#">Item II</a></li>
<li><a class="dropdown-item" data-value="3" href="#">Item III</a></li>
<li><a class="dropdown-item" data-value="4" href="#">Item IV</a></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>언급URL : https://stackoverflow.com/questions/13437446/how-to-display-selected-item-in-bootstrap-button-dropdown-title
'sourcecode' 카테고리의 다른 글
| 스핑크스SE로 MVA를 검색하려면 어떻게 해야 합니까? (0) | 2023.08.12 |
|---|---|
| 파일에서 찾기 및 바꾸기 실패 (0) | 2023.08.12 |
| fragment에서 getSupportFragmentManager()에 액세스하려면 어떻게 해야 합니까? (0) | 2023.08.12 |
| 별도의 개발 및 Prod Firebase 환경 (0) | 2023.08.12 |
| UI WebView에서 WKWebView로 마이그레이션 (0) | 2023.08.12 |