切换选择标记中出现的值

Question

如何切换此select标签示例中出现的值......

如果我在列表中选择人类代码，则显示的值为556，如果我选择了动物代码，则选择框中显示的值将会显示是556.我应该怎么做？我是否需要在select标签中添加javascript或其他内容？

<select name="test" id="test">
  <option value="556">Code for Humans</option>
  <option value="556">Code for Animals</option>
  <option value="556">Code for Elements</option>
</select>

Answer 1

没有直接的方法，因为这就是选择框的工作方式。

但是你可以尝试在选择框的正上方放置一个文本框（放置没有边框的文本框并在div中选择框，并使文本框宽度为满，边距和填充足以使文本框适合选择框）。

处理文本的焦点以显示下拉列表和选择，在文本框中显示代码。因此，用户会看到包含代码的文本框，而不是选定的值。

演示 - jsfiddle.net/5E7DS /

但是，这不会像选择框一样。更改文本本身以显示代码也会更容易和正确。