我在 HTML 中对 forms 的这个想法/问题最接近的解决方案是什么？

Question

我想在 HTML 中制作一个 select 表格，如果选择了第一个 select 组中的某些选项，则检查是否显示辅助 select 组

<body>
    <form name="Test">
        <!-- all the factors to account for when calculating odds-->
        <div>
            <label>
            <select name="FirstList" id="FirstListID">
                <option value="1">First option</option>
                <option value="2">Second option</option>
                <option value="3">Third option</option>
            </select><br>
                
            <!-- SecondList would be visible if "1" is selected-->
            <label name="SecondList" style="display:none">List for "1":
                <select name="SecondListSelect" id="SecondListSelectID">
                    <option value="3">Placeholder</option>
                </select><br>
            </label>
            <!-- ThirdList would be visible if "2" is selected-->
            <label name="ThirdList" style="display:none">List for "2":
                <select name="ThirdListSelect" id="ThirdListSelectID">
                    <option value="4">Placeholder</option>
                </select><br>
            </label>
            <!-- No secondary select form appears if "3" is selected-->
        </div>
    </form>
</body>

我已经尝试使用 AddEventListeners，但代码似乎无法维护，因为我计划在主下拉菜单中添加更多选项，因此我需要不断添加根据选择的主要选项显示的次要 select 组。 我怎么能 go 关于在 JS 中编码这个？

Answer 1

给每个<label>一个标识符，将其绑定到它应该可见的value 。 数据属性会起作用。 然后，每当<select>更改时，遍历所有此类标签并隐藏它们。 从 select 中获取.value并使用字符串连接为数据集中的元素构造一个选择器，然后您可以 select 该元素并显示它。

例如，带有像这样的标签

<label data-option=1>

你可以有

for (const label of document.querySelectorAll('[data-option]')) {
  label.style.display = 'none';
}
document.querySelector(`[data-option=${select.value}]`).style.display = 'block';

在更改侦听器中。

Answer 2

将第二个<select>元素的选项存储在 object 中。确保键与第一个<select>中选项的value属性值匹配。

在第一个<select>上监听change事件。 每当发生更改时，清空第二个<select>的选项，从 object 获取新选项并使用该数据创建新的<option>元素。

现在您有了一个易于缩放的动态<select>元素。

 const optionData = { '1': [ { label: 'Foo', value: 'foo', } ], '2': [ { label: 'Bar', value: 'bar', }, { label: 'Baz', value: 'baz', } ], '3': [ { label: 'Hello', value: 'hello', }, { label: 'World', value: 'world', } ] }; const firstList = document.querySelector('#first-list'); const secondList = document.querySelector('#second-list'); function removeOptions(selectElement) { for (let i = selectElement.options.length - 1; i >= 0; i--) { selectElement.remove(i); } } // Update the second `<select>` based on the first's selection. firstList.addEventListener('change', event => { const value = event.target.value; const options = optionData[value]; removeOptions(secondList); for (const { label, value } of options) { const option = new Option(label, value); secondList.add(option); } });

 <label for="first-list">List One</label> <select name="first-list" id="first-list"> <option value="" selected disabled>Make a selection</option> <option value="1">First option</option> <option value="2">Second option</option> <option value="3">Third option</option> </select> <label for="second-list">List Two</label> <select name="second-list" id="second-list"> <option value="" selected disabled>No options yet</option> </select>

Answer 3

您可以从您的 js 文件构建选择器：

 const optionGroups = { "first": [ { "text": "for first - 1", "value": 1 } ], "second": [ { "text": "for second - 1", "value": 1 }, { "text": "for second - 2", "value": 2 } ], "third": [ { "text": "for third - 1", "value": 1 }, { "text": "for third - 2", "value": 2 }, { "text": "for third - 3", "value": 3 } ] }, mainSelect = document.querySelector('#mainSelect'), secondarySelect = document.querySelector('#secondarySelect'); async function startWithMainSelect() { for (let key of Object.keys(optionGroups)) { const option = new Option(key); mainSelect.appendChild(option); } onChangeMainSelect(); } function onChangeMainSelect() { while (secondarySelect.firstChild) secondarySelect.firstChild.remove(); for (let _option of optionGroups[mainSelect.value]) { const option = new Option(_option.text, _option.value); secondarySelect.appendChild(option); } } mainSelect.addEventListener('change', onChangeMainSelect); startWithMainSelect();

 <.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>replit</title> <link href="style:css" rel="stylesheet" type="text/css" /> </head> <body> <h4>Main:</h4> <select id="mainSelect"></select> <br> <h4>Secondary:</h4> <select id="secondarySelect"></select> <script src="https.//replit.com/public/js/replit-badge.js" theme="blue" defer></script> <script src="script.js"></script> </body> </html>

如果有很多选项，您可以将它们移动到 json 文件中并从那里请求它们。 这是一个例子。

我在 HTML 中对 forms 的这个想法/问题最接近的解决方案是什么？

问题描述

3 个解决方案

解决方案1
0 2023-01-01 22:40:51

解决方案2
0 2023-01-01 22:52:38

解决方案3
0 2023-01-01 23:43:22

我在 HTML 中对 forms 的这个想法/问题最接近的解决方案是什么？

问题描述

3 个解决方案

解决方案1 0 2023-01-01 22:40:51

解决方案2 0 2023-01-01 22:52:38

解决方案3 0 2023-01-01 23:43:22

解决方案1
0 2023-01-01 22:40:51

解决方案2
0 2023-01-01 22:52:38

解决方案3
0 2023-01-01 23:43:22