多年来我一直将输入元素作为范围。我可以通过按钮更改年份值。我想在第二个选择中创建嵌套列表,这取决于范围输入的年份和第一个选择 - id countrySelect。
<input type="range" id="yearRange" min="0" max="3" list="yearsDatalist" value="3"
onChange="changeYear(value)" onInput="changeYearLite(value)">
<datalist id="yearsDatalist">
<option value="0" label="1918"></option>
<option value="1" label="1936"></option>
<option value="2" label="1950"></option>
<option value="3" label="1981"></option>
</datalist>
然后我有两个选择元素。第一个是静态的——不需要更改那里的值:
<select id="countrySelect">
<option value="0">Sweden</option>
<option value="1">Germany</option>
<option value="2">USA</option>
</select>
第二次选择取决于年份和第一次使用 id=countrySelect
进行选择时的值
<select id="itemSelection"></select>
我在一些不同的项目中使用对象作为这样的值:
const yearsFilterDataList = {
"1918": {
"0": "Choose model",
"volvo": "Volvo",
"mercedes": "Mercedes",
"saab": "Saab"
}, ...
最佳答案
我建议使用 template literal for string interpolation在 querySelector
中查找所选选项的标签属性。
function changeYear (value) {
let selectedOption = document.querySelector(`option[value="${value}"]`);
let selectedYear = selectedOption.label;
let data = yearsFilterDataList[selectedYear];
// Do what you want with the car information
}
下次尝试以更好的方式提供和组织您的代码(HTML、CSS、JS),这样人们就不必猜测您的设置到底是什么。您也没有提供完整的 yearsFilterDataList
对象,因此 slider 仅在第一次勾选时填充选择表单。
但这是一个假定的实现:
const yearsFilterDataList = {
"1918": {
"0": "Choose model",
"volvo": "Volvo",
"mercedes": "Mercedes",
"saab": "Saab"
}
}
function changeYearLite (value) {
// ?
}
function changeYear (value) {
let selectedOption = document.querySelector(`option[value="${value}"]`);
let selectedYear = selectedOption.label;
let data = yearsFilterDataList[selectedYear];
if (!data) return console.warn('no data found')
let wrapper = document.getElementById('itemSelection');
Object.keys(data).forEach((key, index) => {
let option = document.createElement('option');
option.value = index;
option.textContent = data[key];
wrapper.appendChild(option);
})
}
<input type="range" id="yearRange" min="0" max="3" list="yearsDatalist" value="3"
onChange="changeYear(value)" onInput="changeYearLite(value)">
<datalist id="yearsDatalist">
<option value="0" label="1918"></option>
<option value="1" label="1936"></option>
<option value="2" label="1950"></option>
<option value="3" label="1981"></option>
</datalist>
<select id="countrySelect">
<option value="0">Sweden</option>
<option value="1">Germany</option>
<option value="2">USA</option>
</select>
<select id="itemSelection"></select>
关于javascript - 多个嵌套的选择下拉列表依赖于 JavaScript 中的输入元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72800214/