javascript - 多个嵌套的选择下拉列表依赖于 JavaScript 中的输入元素

Question

多年来我一直将输入元素作为范围。我可以通过按钮更改年份值。我想在第二个选择中创建嵌套列表，这取决于范围输入的年份和第一个选择 - 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"
    }, ...

Answer 1

我建议使用 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>