如何实现下拉菜单联动，根据选中选项调用对应div？

首先得指出你现有代码里的一个关键问题：两个<select>标签用了同一个id="mySelect1"，这不符合HTML规范（页面内的id必须唯一），浏览器只会识别第一个select，这是你当前功能无法正常工作的核心原因之一。

下面给你两种可行的实现方案，对应你想要的“根据第一个下拉选中值切换第二个下拉内容”的需求：

方案一：动态更新第二个下拉的选项（推荐） #

这种方案只用一个第二个下拉框，通过JavaScript根据第一个下拉的选中值，动态替换下拉选项，代码更简洁高效。

完整代码示例 #

HTML部分

<select id="mySelect" onChange="check(this);">
    <option>Select an Option</option>
    <option value="all">Select All</option>
    <option value="name">Names</option>
    <option value="course">Courses</option>
</select>
<select id="mySelect1" disabled="disabled"></select>

PHP + JavaScript部分

<script type="text/javascript">
// 通过PHP把数据库中的姓名、课程数据转换为JS数组
const namesData = [
    <?php
    // 注意：mysql_query已废弃，建议改用mysqli/PDO
    $sql = "SELECT DISTINCT Sno, names FROM table ";
    $result = mysql_query($sql);
    while ($row = mysql_fetch_array($result)) {
        echo "{value: '" . $row['Sno'] . "', text: '" . $row['names'] . "'},";
    }
    ?>
];

const coursesData = [
    <?php
    $sql = "SELECT DISTINCT Sno, courses FROM table ";
    $result = mysql_query($sql);
    while ($row = mysql_fetch_array($result)) {
        echo "{value: '" . $row['Sno'] . "', text: '" . $row['courses'] . "'},";
    }
    ?>
];

function check(elem) {
    const secondSelect = document.getElementById('mySelect1');
    // 启用/禁用第二个下拉
    secondSelect.disabled = !elem.selectedIndex;
    // 清空现有选项
    secondSelect.innerHTML = '';
    
    // 根据选中值加载对应选项
    switch(elem.value) {
        case 'name':
            addOptions(secondSelect, namesData);
            break;
        case 'course':
            addOptions(secondSelect, coursesData);
            break;
        case 'all':
            // 合并姓名和课程选项
            addOptions(secondSelect, namesData.concat(coursesData));
            break;
        default:
            secondSelect.innerHTML = '<option>Please select an option first</option>';
            break;
    }
}

// 封装添加选项的工具函数
function addOptions(selectElement, data) {
    data.forEach(item => {
        const option = document.createElement('option');
        option.value = item.value;
        option.textContent = item.text;
        selectElement.appendChild(option);
    });
}
</script>

方案二：通过显示/隐藏不同div切换下拉框 #

这和你原本的思路一致：为每个选项创建独立的下拉框，放在不同div中，通过控制div的显示状态来切换内容。

完整代码示例 #

HTML部分

<select id="mySelect" onChange="check(this);">
    <option>Select an Option</option>
    <option value="all">Select All</option>
    <option value="name">Names</option>
    <option value="course">Courses</option>
</select>

<!-- 姓名下拉框容器 -->
<div id="nameSelectWrap" style="display: none;">
    <select id="nameSelect" disabled="disabled">
        <?php
        $sql="SELECT DISTINCT Sno, names FROM table ";
        $result = mysql_query($sql);
        while ($row = mysql_fetch_array($result)) {
            echo "<option value=' " . $row['Sno'] ."'>" . $row['names'] ."</option>";
        }
        ?>
    </select>
</div>

<!-- 课程下拉框容器 -->
<div id="courseSelectWrap" style="display: none;">
    <select id="courseSelect" disabled="disabled">
        <?php
        $sql="SELECT DISTINCT Sno, courses FROM table ";
        $result = mysql_query($sql);
        while ($row = mysql_fetch_array($result)) {
            echo "<option value=' " . $row['Sno'] ."'>" . $row['courses'] ."</option>";
        }
        ?>
    </select>
</div>

<!-- 全量选项下拉框容器 -->
<div id="allSelectWrap" style="display: none;">
    <select id="allSelect" disabled="disabled">
        <?php
        // 合并姓名和课程选项
        $sql="SELECT DISTINCT Sno, names FROM table ";
        $result = mysql_query($sql);
        while ($row = mysql_fetch_array($result)) {
            echo "<option value=' " . $row['Sno'] ."'>" . $row['names'] ."</option>";
        }
        $sql="SELECT DISTINCT Sno, courses FROM table ";
        $result = mysql_query($sql);
        while ($row = mysql_fetch_array($result)) {
            echo "<option value=' " . $row['Sno'] ."'>" . $row['courses'] ."</option>";
        }
        ?>
    </select>
</div>

JavaScript部分

<script type="text/javascript">
function check(elem) {
    // 先隐藏所有下拉容器
    document.getElementById('nameSelectWrap').style.display = 'none';
    document.getElementById('courseSelectWrap').style.display = 'none';
    document.getElementById('allSelectWrap').style.display = 'none';
    
    const selectedVal = elem.value;
    
    // 根据选中值显示对应容器并启用下拉框
    switch(selectedVal) {
        case 'name':
            const nameSelect = document.getElementById('nameSelect');
            nameSelect.disabled = false;
            document.getElementById('nameSelectWrap').style.display = 'block';
            break;
        case 'course':
            const courseSelect = document.getElementById('courseSelect');
            courseSelect.disabled = false;
            document.getElementById('courseSelectWrap').style.display = 'block';
            break;
        case 'all':
            const allSelect = document.getElementById('allSelect');
            allSelect.disabled = false;
            document.getElementById('allSelectWrap').style.display = 'block';
            break;
        default:
            // 默认状态下禁用所有下拉框
            document.getElementById('nameSelect').disabled = true;
            document.getElementById('courseSelect').disabled = true;
            document.getElementById('allSelect').disabled = true;
            break;
    }
}
</script>

重要注意事项 #

1. 废弃函数提醒：你代码中使用的mysql_query在PHP 7.0及以上版本已被废弃，建议改用mysqli或PDO扩展，避免兼容性和安全问题。
2. SQL注入风险：如果后续代码涉及用户输入的参数，一定要使用预处理语句，防止SQL注入攻击。
3. 数据库连接：确保你的页面已经正确建立了数据库连接，否则查询会失败。

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