你可以试试https://codepen.io/Jonathan-Rodrigues-Cardoso/pen/WNmQKGo

<div id="container">
  <select id="select-range" onchange="onChangeSelect(this)">
    <option>0-9</option>
    <option>10-19</option>
    <option>20-29</option>
    <option>custom</option>
  </select>

  <div>
    <input id="input-from" type="number" name="min" min="0" max="30" disabled />
    -
    <input id="input-to" type="number" name="max" min="0" max="30" disabled />
  </div>

  <button onclick="onSelect()">select</button>
</div>

<script>
  const onChangeSelect = (event) => {
    if (event.value === "custom") {
      document.getElementById("input-to").disabled = false;
      document.getElementById("input-from").disabled = false;
    } else {
      document.getElementById("input-to").disabled = true;
      document.getElementById("input-from").disabled = true;
    }
  };

  const onSelect = () => {
    const selectRange = document.getElementById("select-range").value;
    let range = [];

    if (selectRange === "custom") {
      const inputTo = document.getElementById("input-to").value;
      const inputFrom = document.getElementById("input-from").value;
      range[0] = inputFrom;
      range[1] = inputTo;
    } else {
      range = selectRange.split("-");
    }

    alert(`range: ${range[0]} - ${range[1]}`);
    //do something with range. like send to server
  };
</script>

<style>
  #container {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 10px;
  }
</style>

字符串
你会有一些像

的数据

您将不得不自定义整个选择，然后如果你想添加输入字段选择，而不是这样，你应该考虑添加一个选项“自定义”，并在人点击后，你应该显示输入字段，这是更有效的，然后自定义整个选择。

function showInput(){
const rangeSelector = document.getElementById("range-selector")
const customRangeInput = document.getElementById("custom-range-input")
if (rangeSelector.value=="Custom Range"){
customRangeInput.style.display = "block"
}
else{
customRangeInput.style.display = "none"
}

}

个字符