要实现这个功能,你可以使用JavaScript来监听第一个select的选择,并将选择的内容展示在第二个select中。以下是一个示例代码:

<!DOCTYPE html>
<html>
<head>
    <title>Select监听示例</title>
</head>
<body>
    <select id="select1" onchange="showSelectedValue()">
        <option value="1">选项1</option>
        <option value="2">选项2</option>
        <option value="3">选项3</option>
    </select>

    <select id="select2">
        <!-- 这里将展示第一个select选择的内容 -->
    </select>

    <script>
        function showSelectedValue() {
            // 获取第一个select的元素
            var select1 = document.getElementById("select1");

            // 获取选中的值
            var selectedValue = select1.options[select1.selectedIndex].text;

            // 获取第二个select的元素
            var select2 = document.getElementById("select2");

            // 清空第二个select的内容
            select2.innerHTML = "";

            // 创建一个新的option元素
            var option = document.createElement("option");

            // 设置新option的文本为第一个select选择的内容
            option.text = selectedValue;

            // 将新option添加到第二个select中
            select2.add(option);
        }
    </script>
</body>
</html>

在上述代码中,我们首先使用onchange属性将第一个select的选择事件绑定到showSelectedValue()函数上。当用户选择了一个选项时,该函数会被调用。

showSelectedValue()函数中,我们首先获取第一个select的元素,并使用selectedIndex属性获取当前选择的选项索引。然后,我们获取第二个select的元素,并清空其内容。

接下来,我们使用createElement()方法创建一个新的option元素,并使用text属性设置其文本为第一个select选择的内容。最后,我们使用add()方法将新的option元素添加到第二个select中。

这样,当用户选择第一个select中的选项时,第二个select会动态展示出所选择的内容


原文地址: http://www.cveoy.top/t/topic/iiKV 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录