Bootstrap 5下拉菜单:在下拉按钮中获取选定的下拉项值

当我试图将所选下拉项设置为下拉按钮值时，我的下拉按钮出现了一个简单问题。

标志图标和文本应该动态更改。我举了一些例子，但正如我所看到的，它并没有像我预期的那样工作。

我唯一的问题是标志图标没有动态更改

实时示例：https://codepen.io/themes4all/pen/wvdemKz

HTML:

<div class="dropdown">
<button class="btn btn-primary btn-lg dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"><span class="flag-icon flag-icon-us me-1"></span> <span>English</span></button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li>
<a class="dropdown-item active" href="#"><span class="flag-icon flag-icon-us me-1"></span> <span>English</span></a>
</li>
<li>
<a class="dropdown-item" href="#"><span class="flag-icon flag-icon-fr me-1"></span> <span>French</span></a>
</li>
<li>
<a class="dropdown-item" href="#"><span class="flag-icon flag-icon-es me-1"></span> <span>Spanich</span></a>
</li>
<li>
<a class="dropdown-item" href="#"><span class="flag-icon flag-icon-sa me-1"></span> <span>Arabic</span></a>
</li>
</ul>
</div>

jQuery

if ($(".dropdown").length) {
$(document).on("click", ".dropdown-menu .dropdown-item", function (e) {
e.preventDefault();
if (!$(this).hasClass("active")) {
var swalWithBootstrapButtons = Swal.mixin({
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-danger me-3",
},
buttonsStyling: false,
});
swalWithBootstrapButtons
.fire({
title: "Are you sure?",
text: "Do you really want to change your current language!",
icon: "warning",
confirmButtonText: "<i class='fas fa-check-circle me-1'></i> Yes, I am!",
cancelButtonText: "<i class='fas fa-times-circle me-1'></i> No, I'm Not",
showCancelButton: true,
reverseButtons: true,
focusConfirm: true,
})
.then((result) => {
if (result.isConfirmed) {
if (!$(this).hasClass("active")) {
$(".dropdown-menu .dropdown-item").removeClass("active");
$(this).addClass("active");
$(this)
.parents(".dropdown")
.find(".btn")
.html("<span class='flag-icon flag-icon-us me-1'></span>" + $(this).text());
}
Swal.fire({
icon: "success",
title: "Amazing!",
text: "Your current language has been changed successfully.",
showConfirmButton: false,
timer: 1500,
});
}
});
}
});
}

您需要用.html($(this).html());替换.html("<span class='flag-icon flag-icon-us me-1'></span>" + $(this).text());，它将为您提供所需的输出

请检查一下，我刚刚更新了代码以获得点击选项的类，并将其添加到HTML 中的span中

if ($(".dropdown").length) {
$(document).on("click", ".dropdown-menu .dropdown-item", function (e) {
e.preventDefault();
var cloneflagicon = $(this).find('span.flag-icon').attr('class');
if (!$(this).hasClass("active")) {
var swalWithBootstrapButtons = Swal.mixin({
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-danger me-3",
},
buttonsStyling: false,
});
swalWithBootstrapButtons
.fire({
title: "Are you sure?",
text: "Do you really want to change your current language!",
icon: "warning",
confirmButtonText: "<i class='fas fa-check-circle me-1'></i> Yes, I am!",
cancelButtonText: "<i class='fas fa-times-circle me-1'></i> No, I'm Not",
showCancelButton: true,
reverseButtons: true,
focusConfirm: true,
})
.then((result) => {
if (result.isConfirmed) {
if (!$(this).hasClass("active")) {
$(".dropdown-menu .dropdown-item").removeClass("active");
$(this).addClass("active");
$(this)
.parents(".dropdown")
.find(".btn")
.html("<span class='"+cloneflagicon+"'></span>" + $(this).text());
}
Swal.fire({
icon: "success",
title: "Amazing!",
text: "Your current language has been changed successfully.",
showConfirmButton: false,
timer: 1500,
});
}
});
}
});
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap 5</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css" rel="stylesheet" />
</head>
<body>
<div class="dropdown">
<button class="btn btn-primary btn-lg dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"><span class="flag-icon flag-icon-us me-1"></span> <span>English</span></button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li>
<a class="dropdown-item active" href="#"><span class="flag-icon flag-icon-us me-1"></span> <span>English</span></a>
</li>
<li>
<a class="dropdown-item" href="#"><span class="flag-icon flag-icon-fr me-1"></span> <span>French</span></a>
</li>
<li>
<a class="dropdown-item" href="#"><span class="flag-icon flag-icon-es me-1"></span> <span>Spanich</span></a>
</li>
<li>
<a class="dropdown-item" href="#"><span class="flag-icon flag-icon-sa me-1"></span> <span>Arabic</span></a>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</body>
</html>

相关内容

最新更新

热门标签：