Question

我正在使用选择标签供用户从中选择国家/地区。当他们选择一个选项时，我想显示国家代码而不是完整的国家名称。为此，无论何时发生选择，都会在其内容为国家/地区代码的情况下，将select标签的父div添加到新类中。每当选择一个选项时，父div也将添加一个selection类。

我的问题是，每当选择一个项目时，我都希望在文本字段中隐藏所选的选项，但是同时我希望能够在Windows机器上的列表中看到文本（选择背景为白色）），当我更改选择时。

选择是否可能在关闭时仅在列表中显示选项，而不在文本字段中显示？

Answer 1

我不确定我是否理解您的问题，但这听起来像您想要一个<select>字段，其中“ selected”选项的显示文本与{的下拉列表中显示的文本不同{1}}字段？

如果是这样，您可以利用<select>元素不可见但仍可以正常显示其下拉<select>列表这一事实。通过使用<option>对元素进行样式设置并将其放置在要用于显示“选定”值的另一个元素上，可以在选择选项时显示不同的内容。

一个快速的概念验证示例：

<select style="position:absolute; opacity:0">

function changeLabel(select) {
  document.getElementById('field-label').innerHTML = select.value;
}

#field {
  position: relative;
  display: inline-block;
  border: 1px solid black;
}

#field-label {
  color: blue;
}

#field-select {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

在列表中显示选择标签选项，但在关闭选择框时隐藏文本

1 个答案: