"自定义选项的下拉选择，包括输入框"

Question

我想要在我的网站上实现一个特定的用法。目前我已经制作了一个简单的下拉选择框，但希望在最后一个选项项中包含输入框，以便用户可以自定义范围。类似于以下代码：

然而这当然无法正常工作。有没有人知道如何正确地实现这个功能？或者是否有其他不同的解决方案呢？

Markus Jarderot · Answer

你可以在以下链接查看一个实现示例：https://codepen.io/Jonathan-Rodrigues-Cardoso/pen/WNmQKGo

在这个示例中，我们创建了一个下拉选择框和两个输入框，当用户在下拉菜单中选择“custom”选项时，两个输入框会变为可用状态，允许用户自定义范围。当点击“select”按钮后，根据用户的选择或输入，将获取并显示选定的范围。

HTML部分：

JavaScript部分：

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]}`);
  // 在这里可以根据范围执行相应的操作，例如发送到服务器
};

样式部分（CSS）：

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

此方案实现了你所期望的效果，如截图所示：

Bohemian · Answer

如果你想在选择器中添加输入框，那么你可能需要自定义整个选择组件。但相比完全自定义选择器，建议你考虑增加一个“自定义”选项，当用户点击这个选项时显示输入框，这样会更有效率。

下面是一个示例代码：

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";
  }
}