Bootstrap 5 Dropdowns：在下拉按鈕中獲取選定的下拉項目值

Question

當我嘗試將選定的下拉項目設置為下拉按鈕值時，我的下拉按鈕有一個簡單的問題。

標志圖標和文本應該動態更改我做了一些例子，但我看到它沒有按我預期的那樣工作。

我唯一的問題是旗幟圖標沒有動態改變

現場示例： 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,
                        });
                    }
                });
        }
    });
}

Answer 1

你需要替換.html("<span class='flag-icon flag-icon-us me-1'></span>" + $(this).text()); 與.html($(this).html()); ，它將為您提供所需的輸出

Answer 2

請檢查這個，我剛剛更新了代碼以獲取單擊選項的類並添加到 HTML 中的跨度

 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>