小程序 联动下拉选择框。。

Question

求一个小程序 三级联动下拉选择框的demo,
不使用picker组件。。。

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

这是一个简单的三级联动下拉选择框的示例，不使用Picker组件：

// 创建数据对象
const data = [
    { id: '1', name: '一级' },
    { id: '2', name: '二级' },
    { id: '3', name: '三级' }
];

// 获取所有选中的选项
function getSelectedOptions() {
    return Array.from(document.querySelectorAll('.dropdown-menu li.selected')).map(item => item.textContent);
}

// 打印选中选项
console.log('当前选中选项:', getSelectedOptions());

// 为每个选项添加点击事件处理函数
data.forEach((item, index) => {
    const dropdownMenu = document.querySelector(`.dropdown-menu#${index}`);
    dropdownMenu.addEventListener('click', function (event) {
        event.preventDefault();
        const selectedOption = event.target.textContent;
        // 更新选中选项数组
        if (selectedOption === '三级') {
            dropdownMenu.classList.remove('selected');
            data[index].name = '三级';
        } else if (selectedOption === '二级') {
            dropdownMenu.classList.remove('selected');
            data[index].name = '二级';
        } else if (selectedOption === '一级') {
            dropdownMenu.classList.remove('selected');
            data[index].name = '一级';
        }
    });
});

在这个例子中，我们首先创建了一个包含三个选项的数据对象，并为每个选项添加了点击事件处理器。当用户单击某个选项时，它将改变对应的DropdownMenu元素的类名（.selected），以表示当前选中。

然后，我们在JavaScript中获取当前选中的选项并打印出来。这可以帮助你了解哪些选项是选中的，以及它们是如何被选中的。

注意：这个示例假设你的页面有一个ID为'dropdown-menu'的元素和一个ID为'dropdown-menu-#'的子元素。你需要根据实际情况调整这些ID。