为关联下拉菜单添加搜索功能并实现组合选项内容展示

我正在做第一个网站项目，有两个关联下拉菜单，需要实现两个核心功能：

1. 给每个下拉菜单添加搜索选项
2. 根据两个菜单的组合选择展示对应内容（最终目标是表格，这里先用文本指代）

当前代码 #

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script language="javascript" type="text/javascript">
    function dynamicdropdown(listindex)
    {
        switch (listindex)
        {
        case "salesforce" :
            document.getElementById("end").options[0]=new Option("End","");
            document.getElementById("end").options[1]=new Option("Slack","slack");
            document.getElementById("end").options[2]=new Option("Google Sheets","googlesheets");
            break;
        case "slack" :
            document.getElementById("end").options[0]=new Option("End","");
            document.getElementById("end").options[1]=new Option("Salesforce","salesforce");
            document.getElementById("end").options[2]=new Option("Google Sheets","googlesheets");
            break;
        case "googlesheets" :
            document.getElementById("end").options[0]=new Option("End","");
            document.getElementById("end").options[1]=new Option("Salesforce","salesforce");
            document.getElementById("end").options[2]=new Option("Slack","slack");
            break;
        }
        return true;
    }
    </script>
    </head>
    <body>
        <center>
        <h2>Dependent dropdowns</h2>
    <div class="category_div" id="category_div">
        <select id="source" name="source" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
        <option value="start">Start</option>
        <option value="salesforce">Salesforce</option>
        <option value="slack">Slack</option>
        <option value="googlesheets">Google Sheets</option>
        </select>
    </div>
    <div class="sub_category_div" id="sub_category_div">
        <script type="text/javascript" language="JavaScript">
        document.write('<select name="end" id="end"><option value="">End</option></select>')
        </script>
        <noscript>
        <select id="end" name="end">
            <option value="slack">Slack</option>
            <option value="googlesheets">Google Sheets</option>
        </select>
        </noscript>
    </div>
    </center>
    </body>
</html>

尝试过的方案及问题 #

搜索功能尝试 #

试过引入selectize.js，但添加后完全没生效，调整脚本位置、修复标签都没用。也看过基于<li>的搜索下拉方案，但不知道怎么和现有菜单关联逻辑结合。

尝试的代码片段：

$(document).ready(function () {
      $('select').selectize({
          sortField: 'text'
      });
  });

组合内容展示尝试 #

需要根据两个菜单的组合展示独特内容，比如选Salesforce+Slack时要展示对应的工作流表格：

参考过相关单下拉触发内容的方案，但不知道怎么同时处理两个菜单的选择逻辑。目前需要覆盖的组合：

• Salesforce和Slack对应的内容
• Salesforce和Google Sheets对应的内容
• Slack和Salesforce对应的内容
• Slack和Google Sheets对应的内容
• Google Sheets和Salesforce对应的内容
• Google Sheets和Slack对应的内容

希望用原生JS实现这两个功能。

完整代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Searchable Dependent Dropdowns</title>
    <style>
        .search-dropdown {
            position: relative;
            width: 220px;
            margin: 0 15px;
            display: inline-block;
        }
        .search-dropdown input {
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        .search-dropdown .options {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            border: 1px solid #ddd;
            border-top: none;
            max-height: 220px;
            overflow-y: auto;
            background: white;
            display: none;
            z-index: 100;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .search-dropdown .options .option {
            padding: 10px;
            cursor: pointer;
            font-size: 14px;
        }
        .search-dropdown .options .option:hover {
            background: #f5f5f5;
        }
        .content-container {
            margin-top: 35px;
            padding: 25px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 700px;
            text-align: left;
        }
        table {
            border-collapse: collapse;
            width: 100%;
            margin-top: 10px;
        }
        table th, table td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: left;
        }
        table th {
            background-color: #fafafa;
        }
    </style>
</head>
<body>
    <center>
        <h2>Searchable Dependent Dropdowns</h2>
        <div class="search-dropdown" id="source-dropdown">
            <input type="text" placeholder="Select Start..." id="source-input" readonly>
            <div class="options" id="source-options">
                <div class="option" data-value="start">Start</div>
                <div class="option" data-value="salesforce">Salesforce</div>
                <div class="option" data-value="slack">Slack</div>
                <div class="option" data-value="googlesheets">Google Sheets</div>
            </div>
        </div>

        <div class="search-dropdown" id="end-dropdown">
            <input type="text" placeholder="Select End..." id="end-input" readonly>
            <div class="options" id="end-options">
                <div class="option" data-value="">End</div>
            </div>
        </div>

        <div class="content-container" id="content-container">
            <p>请选择起始和结束选项以查看对应内容</p>
        </div>
    </center>

    <script>
        // 下拉菜单关联数据
        const dropdownRelations = {
            "start": [],
            "salesforce": [
                { value: "", text: "End" },
                { value: "slack", text: "Slack" },
                { value: "googlesheets", text: "Google Sheets" }
            ],
            "slack": [
                { value: "", text: "End" },
                { value: "salesforce", text: "Salesforce" },
                { value: "googlesheets", text: "Google Sheets" }
            ],
            "googlesheets": [
                { value: "", text: "End" },
                { value: "salesforce", text: "Salesforce" },
                { value: "slack", text: "Slack" }
            ]
        };

        // 组合对应的内容数据
        const comboContent = {
            "salesforce-slack": `
                <h3>Salesforce → Slack 工作流</h3>
                <table>
                    <tr><th>自动化工具</th><th>触发条件</th><th>执行动作</th></tr>
                    <tr><td>Zapier</td><td>Salesforce添加联系人</td><td>发送消息到Slack频道</td></tr>
                    <tr><td>Zapier</td><td>Salesforce联系人手机号更新</td><td>更新Slack用户资料</td></tr>
                    <tr><td>Make</td><td>Salesforce添加联系人</td><td>发送消息到Slack频道</td></tr>
                </table>
            `,
            "salesforce-googlesheets": "<h3>Salesforce → Google Sheets 工作流</h3><p>此处展示对应表格或文本内容</p>",
            "slack-salesforce": "<h3>Slack → Salesforce 工作流</h3><p>此处展示对应表格或文本内容</p>",
            "slack-googlesheets": "<h3>Slack → Google Sheets 工作流</h3><p>此处展示对应表格或文本内容</p>",
            "googlesheets-salesforce": "<h3>Google Sheets → Salesforce 工作流</h3><p>此处展示对应表格或文本内容</p>",
            "googlesheets-slack": "<h3>Google Sheets → Slack 工作流</h3><p>此处展示对应表格或文本内容</p>"
        };

        // 初始化单个搜索下拉组件
        function setupDropdown(dropdownId, inputId, optionsId) {
            const dropdown = document.getElementById(dropdownId);
            const input = document.getElementById(inputId);
            const optionsContainer = document.getElementById(optionsId);

            // 点击输入框展开选项列表
            input.addEventListener('click', () => {
                optionsContainer.style.display = 'block';
            });

            // 选择选项逻辑
            optionsContainer.addEventListener('click', (e) => {
                if (e.target.classList.contains('option')) {
                    input.value = e.target.textContent;
                    input.dataset.value = e.target.dataset.value;
                    optionsContainer.style.display = 'none';
                    // 更新展示内容
                    renderContent();
                    // 如果是起始下拉，更新结束下拉的选项
                    if (dropdownId === 'source-dropdown') {
                        refreshEndOptions(input.dataset.value);
                    }
                }
            });

            // 实时搜索过滤选项
            input.addEventListener('input', () => {
                const keyword = input.value.toLowerCase();
                const allOptions = optionsContainer.querySelectorAll('.option');
                allOptions.forEach(opt => {
                    opt.style.display = opt.textContent.toLowerCase().includes(keyword) ? 'block' : 'none';
                });
            });

            // 点击外部关闭下拉列表
            document.addEventListener('click', (e) => {
                if (!dropdown.contains(e.target)) {
                    optionsContainer.style.display = 'none';
                }
            });
        }

        // 更新结束下拉的选项列表
        function refreshEndOptions(sourceVal) {
            const endOptions = document.getElementById('end-options');
            const endInput = document.getElementById('end-input');
            // 清空现有选项
            endOptions.innerHTML = '';
            // 添加新选项
            const newOptions = dropdownRelations[sourceVal] || [{ value: "", text: "End" }];
            newOptions.forEach(opt => {
                const optEl = document.createElement('div');
                optEl.classList.add('option');
                optEl.dataset.value = opt.value;
                optEl.textContent = opt.text;
                endOptions.appendChild(optEl);
            });
            // 重置结束输入框状态
            endInput.value = 'Select End...';
            endInput.dataset.value = '';
            // 更新内容展示
            renderContent();
        }

        // 根据选择的组合渲染对应内容
        function renderContent() {
            const sourceVal = document.getElementById('source-input').dataset.value;
            const endVal = document.getElementById('end-input').dataset.value;
            const contentBox = document.getElementById('content-container');

            // 未选择有效选项时的提示
            if (!sourceVal || sourceVal === 'start' || !endVal) {
                contentBox.innerHTML = '<p>请选择起始和结束选项以查看对应内容</p>';
                return;
            }

            // 匹配组合内容
            const comboKey = `${sourceVal}-${endVal}`;
            contentBox.innerHTML = comboContent[comboKey] || '<p>暂无该组合的对应内容</p>';
        }

        // 初始化两个下拉组件
        setupDropdown('source-dropdown', 'source-input', 'source-options');
        setupDropdown('end-dropdown', 'end-input', 'end-options');
    </script>
</body>
</html>

方案说明 #

1. 带搜索的关联下拉 #

• 用输入框+自定义选项列表模拟下拉，支持实时输入过滤选项
• 保留原有的菜单关联逻辑，选择起始选项后自动更新结束选项的可选范围
• 点击外部自动关闭下拉，交互更符合用户习惯

2. 组合内容展示 #

• 用对象存储每个选项组合对应的内容，键名格式为起始值-结束值，便于快速匹配
• 监听下拉选择事件，每次选择变化自动更新展示内容
• 支持直接插入HTML表格，满足最终展示表格的需求

优势 #

• 纯原生JS实现，无需依赖任何第三方库
• 代码结构模块化，后续扩展选项或内容只需修改对应的数据对象
• 交互体验接近专业组件，同时保持了完全的自定义灵活性

内容的提问来源于stack exchange，提问作者grifshot