JavaScript DOM操作：根据属性值查找元素并动态更新UI文本与属性

<div class="dropdown dselect-wrapper select">
    <!-- 这是需要更新的显示按钮 -->
    <button class="form-select" data-dselect-text="Charles" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Charles
    </button>
    <div class="dropdown-menu">
        <div class="dselect-items">
            <!-- 这些是包含data-dselect-value的选项按钮 -->
            <button class="dropdown-item active" data-dselect-value="1109" type="button">Charles</button>
            <button class="dropdown-item" data-dselect-value="1108" type="button">Fred</button>
            <button class="dropdown-item" data-dselect-value="1107" type="button">Lionel</button>
            <button class="dropdown-item" data-dselect-value="1106" type="button">Robert</button>
            <button class="dropdown-item" data-dselect-value="1105" type="button">Mike</button>
        </div>
    </div>
</div>

<!-- 外部触发按钮，点击时传入其ID -->
<button onclick="myFunc(this.id)" id="1106">Select client (1106)</button>

function myFunc(clicked_id) {
    // 使用属性选择器查找具有特定data-dselect-value的元素
    var elem = document.querySelector('[data-dselect-value="' + clicked_id + '"]');
    // ... 后续代码
}

function myFunc(clicked_id) {
    var elem = document.querySelector('[data-dselect-value="' + clicked_id + '"]');
    var text = elem.innerText; // 提取元素的文本内容，例如 "Robert"
    // ... 后续代码
}

function myFunc(clicked_id) {
    var elem = document.querySelector('[data-dselect-value="' + clicked_id + '"]');
    var text = elem.innerText;

    var parent = elem.closest(".dropdown"); // 找到最近的.dropdown父容器
    var button = parent.querySelector("[data-bs-toggle=dropdown]"); // 在父容器内查找显示按钮
    // ... 后续代码
}

function myFunc(clicked_id) {
    var elem = document.querySelector('[data-dselect-value="' + clicked_id + '"]');
    // 检查元素是否存在，避免空指针错误
    if (!elem) {
        console.warn("Element with data-dselect-value=" + clicked_id + " not found.");
        return;
    }
    var text = elem.innerText;

    var parent = elem.closest(".dropdown");
    // 检查父容器是否存在
    if (!parent) {
        console.warn("Parent .dropdown for element with data-dselect-value=" + clicked_id + " not found.");
        return;
    }

    var button = parent.querySelector("[data-bs-toggle=dropdown]");
    // 检查目标按钮是否存在
    if (!button) {
        console.warn("Dropdown toggle button not found within parent .dropdown.");
        return;
    }

    button.innerText = text; // 更新按钮的显示文本
    button.setAttribute('data-dselect-text', text); // 更新data-dselect-text属性
}

/**
 * 根据传入的ID，查找匹配的下拉项，提取其文本，并更新主显示按钮的文本和data-dselect-text属性。
 * @param {string} clicked_id - 从外部触发器（如按钮）获取的ID值。
 */
function myFunc(clicked_id) {
    // 1. 根据data-dselect-value属性查找匹配的元素
    var elem = document.querySelector('[data-dselect-value="' + clicked_id + '"]');

    // 健壮性检查：如果未找到元素，则提前退出
    if (!elem) {
        console.warn("未找到匹配 data-dselect-value=\"" + clicked_id + "\" 的元素。");
        return;
    }

    // 2. 提取匹配元素的文本内容
    var text = elem.innerText;

    // 3. 向上查找最近的父级 .dropdown 容器
    var parent = elem.closest(".dropdown");

    // 健壮性检查：如果未找到父级容器，则提前退出
    if (!parent) {
        console.warn("未找到元素（ID: " + clicked_id + "）的父级 .dropdown 容器。");
        return;
    }

    // 4. 在父级容器内查找需要更新的显示按钮（data-bs-toggle="dropdown"）
    var button = parent.querySelector("[data-bs-toggle=dropdown]");

    // 健壮性检查：如果未找到显示按钮，则提前退出
    if (!button) {
        console.warn("在 .dropdown 容器中未找到 data-bs-toggle=\"dropdown\" 按钮。");
        return;
    }

    // 5. 更新显示按钮的文本内容和data-dselect-text属性
    button.innerText = text;
    button.setAttribute('data-dselect-text', text);

    console.log("已将显示按钮更新为: " + text);
}