在“选择”中切换选项的显示

Question

我正在创建一个网页，其中包含一个包含多个选项的Select元素。每个选项代表两个值：代码和人类可读的字符串。我想允许用户切换一个设置（在同一页面上），这将动态切换选择，以便只显示代码或人类可读的字符串。

我想过几种方法：

1. 按下切换按钮后，我重新创建页面，并将相应的选项加载到选择中。这样做的缺点是清除页面上的所有其他字段。

2. 有2个选择，其中1始终隐藏。 One Select具有带代码的选项。另一个Select具有包含人类可读字符串的选项。切换将隐藏/显示适当的选择。这样做的缺点在于我必须手动保持2个选择同步。

另请注意，在任何一个页面上都会有许多需要切换的选择。

非常感谢任何帮助。

谢谢， 菲尔

Answer 1

你可以使用选项标题来保存第二个字符串并使用option.innerHTML

交换它

<option title="human-readable string">short</option>

换到

<option title="short">human-readable string</option>

Answer 2

我说这取决于您的选择将持有的数据量。如果它是一个很大的块，你会更好地服务于你的第一个想法。 您的选择是否会动态增长（例如用户添加选项等）？如果是的话，我会采用AJAX的方式，并采取第二种想法。